屬性：
export interface IAttribute {
id: number;
attributeName: string;
attributeValues: IAttributeValue[];
}
屬性值：
export interface IAttributeValue {
Value: string;
attributeId: number;
Id: number;
}
屬性組件.ts
export class AttributesComponent implements OnInit {
attributes = [] as Array<IAttribute>;
rows = [];
temp = [];
columns = [{ prop: 'attributeName', name: "Attribute Name" }, { prop:'attributeValues'
,name: 'Attribute Values' }];
@ViewChild(DatatableComponent, { static: false }) table: DatatableComponent;
ColumnMode = ColumnMode;
constructor(private productService: ProductService,
private toastr: ToastrService) { }
ngOnInit(): void {
this.productService.getAttributes().subscribe({
next: data => {
this.attributes = data;
console.log(this.attributes);
this.rows = this.attributes;
this.temp = [...this.attributes];
console.log(this.attributes);
},
error: error => {
this.toastr.error(error.message, "Error loading data");
}
})
}
updateFilter(event) {
const val = event.target.value.toLowerCase();
// filter our data
// update the rows
this.rows = this.temp.filter(function(d) {
return d.name.toLowerCase().indexOf(val) !== -1 || !val;
});
// Whenever the filter changes, always go back to the first page
this.table.offset = 0;
}
}
屬性.組件.Html
<div class="card-body custome-datatable">
<input type='text' class="filter-ngx form-control"
placeholder='Type to filter the name column...'
(keyup)='updateFilter($event)' />
<ngx-datatable #table class='bootstrap'
[columns]="columns" [columnMode]="ColumnMode.force"
[headerHeight]="50"
[footerHeight]="50" rowHeight="auto" [limit]="10" [rows]="rows">
</ngx-datatable>
</div>
這是它向我顯示資料的方式：
在這里你可以看到我的物件：
現在我的問題是如何在這里只顯示“值”，這是“attributeValue”的屬性。像紅色、綠色、藍色等。我嘗試閱讀 ngx-datatable 檔案，但它們只顯示源代碼，沒有很好的解釋。
uj5u.com熱心網友回復：
你有兩個選擇。
- 使用
column template和格式化值如下：
<ngx-datatable
#myTable
class="material expandable"
[columnMode]="'force'"
[headerHeight]="50"
[footerHeight]="50"
[rowHeight]="50"
[scrollbarV]="true"
[rows]="rows"
>
<ngx-datatable-column name="name">
<ng-template
let-rowIndex="rowIndex"
let-row="row"
ngx-datatable-cell-template
>
<strong>{{ row.name }}</strong>
</ng-template>
</ngx-datatable-column>
<ngx-datatable-column name="company">
<ng-template
let-rowIndex="rowIndex"
let-row="row"
ngx-datatable-cell-template
>
<strong>{{ formatValue(row.company) }}</strong>
</ng-template>
</ngx-datatable-column>
</ngx-datatable>
并在component.ts檔案中：
formatValue(values) {
return values.map((i) => i.name).join(',');
}
- 首先在建構式中格式化值，然后將其傳遞給 Grid ：
this.rowToRender = this.rows.map((r) => {
let formattedVal = r.company.map((k) => k.name).join(',');
return {
...r,
company: formattedVal,
};
});
作業 演示
轉載請註明出處，本文鏈接：https://www.uj5u.com/net/398053.html
上一篇：使用ng-content將背景關系傳遞給角度組件選擇器
下一篇：重繪頁面時保存服務資料