*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>