*ng如果不被评估
*ngIf not being evaluated
我一直在尝试在 Angular 7 中制作可重用的 CRUD Table 组件,使用 Angular Material,我可以传递任何数据对象数组,table 呈现数据。
在那个 Table 组件中,我还传递了 link 的数组与我想附加 link 的列名成对,例如:
redirectionLinks = [ {link: '/students', column: 'name} ... ]
Table分量:
模板:
<table mat-table [dataSource]="dataList | filterByName:searchValue" class="mat-elevation-z8">
<ng-container *ngFor="let column of columnList; let i = index;" matColumnDef="{{column}}">
<ng-container *ngIf="column!=='Delete' && column!=='Edit'">
<th mat-header-cell *matHeaderCellDef> {{column}} </th>
<ng-container *ngFor="let linkObj of redirectionLinks;let j = index;">
<ng-container *ngIf="column === linkObj.column;">
<td mat-cell *matCellDef="let item" [routerLink]="[linkObj.link, item.id]" class="td-hoverable"> {{item[objKeys[i]]}}</td>
</ng-container>
<ng-container *ngIf="column !== linkObj.column;">
<td mat-cell *matCellDef="let item"> {{item[objKeys[i]]}} </td>
</ng-container>
</ng-container>
</ng-container>
<ng-container *ngIf="column=='Delete'">
<th mat-header-cell *matHeaderCellDef> Delete </th>
<td mat-cell *matCellDef="let item"> <button mat-button color="error" (click)="deleteItem(item)">Delete</button></td>
</ng-container>
<ng-container *ngIf="column=='Edit'">
<th mat-header-cell *matHeaderCellDef> Edit </th>
<td mat-cell *matCellDef="let item"> <button mat-button color="accent" (click)="editItem(item)">Edit</button> </td>
</ng-container>
</ng-container>
<tr mat-header-row *matHeaderRowDef="columnList"></tr>
<tr mat-row *matRowDef="let item; columns: columnList;"></tr>
</table>
Table组件:
逻辑:
@Input() dataList;
@Input() searchValue: string;
@Input() columnList;
@Input() redirectionLinks;
@Output() emitDeleteEvent = new EventEmitter();
@Output() emitEditEvent = new EventEmitter();
objKeys = [];
console = console;
ngOnInit(): void {
// since every object has same props we use the first one -> [0]
this.objKeys = Object.keys(this.dataList[0]);
// add edit and delete cols
this.columnList.push('Delete');
this.columnList.push('Edit');
}
deleteItem(item) {
this.emitDeleteEvent.emit(item);
}
editItem(item) {
this.emitEditEvent.emit(item);
}
ngOnDestroy() {
console.log("im destroyed");
}
StudentsPageComponent(父级)
模板:
<h2 class="centered-header">Students</
<app-search (searchEvent)="getSearchValue($event)"></app-search>
<app-table-crud
(emitDeleteEvent)="deleteStudent($event)"
(emitEditEvent)="editStudent($event)"
[dataList]="students"
[columnList]="tableColumns"
[searchValue]="searchValue"
[redirectionLinks]="redirectionLinks"
></app-table-crud>
逻辑:
export class StudentsPageComponent {
students = [
{ id: '1', name: 'Stefanos Lalic', billAccount: '15123512', accountBalance: '3.00' },
{ id: '2', name: 'Anastasia Lalic', billAccount: '51231252', accountBalance: '23.00' },
{ id: '3', name: 'Olivia Lalic', billAccount: '31515231', accountBalance: '22.00'}
];
tableColumns = ['ID', 'Name', 'Bill Acc', 'Balance'];
redirectionLinks = [
{link: '/billAccount', column: 'Bill Acc'},
{link: '/student', column: 'Name'}
];
searchValue: string;
getSearchValue(searchValue) {
this.searchValue = searchValue;
}
deleteStudent(student) {
console.log(student);
}
editStudent(student) {
console.log(student);
}
}
This is how it looks rendered, keep in mind that only Bill Acc links are rendered, while /student link is being ignored
我通过在我的 Table 组件中添加一个函数来修复它:
hasLink(column) {
return this.redirectionLinks.some(element =>
element.column === column
)
}
我没有使用 *ngFor 在模板中迭代,而是简单地使用了:
<ng-container *ngIf="hasLink(column); then with_link else without_link">
</ng-container>
我一直在尝试在 Angular 7 中制作可重用的 CRUD Table 组件,使用 Angular Material,我可以传递任何数据对象数组,table 呈现数据。
在那个 Table 组件中,我还传递了 link 的数组与我想附加 link 的列名成对,例如:
redirectionLinks = [ {link: '/students', column: 'name} ... ]
Table分量:
模板:
<table mat-table [dataSource]="dataList | filterByName:searchValue" class="mat-elevation-z8">
<ng-container *ngFor="let column of columnList; let i = index;" matColumnDef="{{column}}">
<ng-container *ngIf="column!=='Delete' && column!=='Edit'">
<th mat-header-cell *matHeaderCellDef> {{column}} </th>
<ng-container *ngFor="let linkObj of redirectionLinks;let j = index;">
<ng-container *ngIf="column === linkObj.column;">
<td mat-cell *matCellDef="let item" [routerLink]="[linkObj.link, item.id]" class="td-hoverable"> {{item[objKeys[i]]}}</td>
</ng-container>
<ng-container *ngIf="column !== linkObj.column;">
<td mat-cell *matCellDef="let item"> {{item[objKeys[i]]}} </td>
</ng-container>
</ng-container>
</ng-container>
<ng-container *ngIf="column=='Delete'">
<th mat-header-cell *matHeaderCellDef> Delete </th>
<td mat-cell *matCellDef="let item"> <button mat-button color="error" (click)="deleteItem(item)">Delete</button></td>
</ng-container>
<ng-container *ngIf="column=='Edit'">
<th mat-header-cell *matHeaderCellDef> Edit </th>
<td mat-cell *matCellDef="let item"> <button mat-button color="accent" (click)="editItem(item)">Edit</button> </td>
</ng-container>
</ng-container>
<tr mat-header-row *matHeaderRowDef="columnList"></tr>
<tr mat-row *matRowDef="let item; columns: columnList;"></tr>
</table>
Table组件: 逻辑:
@Input() dataList;
@Input() searchValue: string;
@Input() columnList;
@Input() redirectionLinks;
@Output() emitDeleteEvent = new EventEmitter();
@Output() emitEditEvent = new EventEmitter();
objKeys = [];
console = console;
ngOnInit(): void {
// since every object has same props we use the first one -> [0]
this.objKeys = Object.keys(this.dataList[0]);
// add edit and delete cols
this.columnList.push('Delete');
this.columnList.push('Edit');
}
deleteItem(item) {
this.emitDeleteEvent.emit(item);
}
editItem(item) {
this.emitEditEvent.emit(item);
}
ngOnDestroy() {
console.log("im destroyed");
}
StudentsPageComponent(父级)
模板:
<h2 class="centered-header">Students</
<app-search (searchEvent)="getSearchValue($event)"></app-search>
<app-table-crud
(emitDeleteEvent)="deleteStudent($event)"
(emitEditEvent)="editStudent($event)"
[dataList]="students"
[columnList]="tableColumns"
[searchValue]="searchValue"
[redirectionLinks]="redirectionLinks"
></app-table-crud>
逻辑:
export class StudentsPageComponent {
students = [
{ id: '1', name: 'Stefanos Lalic', billAccount: '15123512', accountBalance: '3.00' },
{ id: '2', name: 'Anastasia Lalic', billAccount: '51231252', accountBalance: '23.00' },
{ id: '3', name: 'Olivia Lalic', billAccount: '31515231', accountBalance: '22.00'}
];
tableColumns = ['ID', 'Name', 'Bill Acc', 'Balance'];
redirectionLinks = [
{link: '/billAccount', column: 'Bill Acc'},
{link: '/student', column: 'Name'}
];
searchValue: string;
getSearchValue(searchValue) {
this.searchValue = searchValue;
}
deleteStudent(student) {
console.log(student);
}
editStudent(student) {
console.log(student);
}
}
This is how it looks rendered, keep in mind that only Bill Acc links are rendered, while /student link is being ignored
我通过在我的 Table 组件中添加一个函数来修复它:
hasLink(column) {
return this.redirectionLinks.some(element =>
element.column === column
)
}
我没有使用 *ngFor 在模板中迭代,而是简单地使用了:
<ng-container *ngIf="hasLink(column); then with_link else without_link">
</ng-container>