相关疑难解决方法(0)

如果使用带有then/else语法的模板,如何将ngFor循环中的当前变量传递给ngIf？

看起来它们在内联时使用时很好,但是无法从模板访问,例如:

<ul *ngFor="let number of numbers">
  <ng-container *ngIf="number % 2 == 0; then even_tpl; else odd_tpl"><>/ng-container>
</ul>


<ng-template #odd_tpl>
  <li>Odd: {{number}}</li>  
</ng-template>

<ng-template #even_tpl>
  <li>Even: {{number}}</li>  
</ng-template>

模板似乎根本没有访问权限number,但如果内联使用它可以工作.

以下链接中的工作版和非工作版的完整示例:plunkr

链接到stackblitz

我有角材料表的常见组件(结构完全相同).所以我想使用ng-content并更改一些列:

@Component({
  selector: 'table-basic-example',
  styleUrls: ['table-basic-example.css'],
  templateUrl: 'table-basic-example.html',
})
export class TableBasicExample {
  displayedColumns = ['test', 'name'];
  dataSource = new MatTableDataSource<Element>(ELEMENT_DATA);
}

const ELEMENT_DATA: { name: string } = [
  {name: 'Hydrogen'},
  {name: 'Helium'},
  {name: 'Lithium'},
  {name: 'Beryllium'},
  {name: 'Boron'},
];

<div class="example-container mat-elevation-z8">
  <mat-table #table [dataSource]="dataSource">

    <!-- Position Column -->
    <ng-container matColumnDef="test">
      <mat-header-cell *matHeaderCellDef>Test</mat-header-cell>
      <mat-cell *matCellDef="let element">

        <ng-content select="[test]"></ng-content>

      </mat-cell>
    </ng-container>

    <!-- Name Column -->
    <ng-container matColumnDef="name">
      <mat-header-cell *matHeaderCellDef> Name </mat-header-cell>
      <mat-cell *matCellDef="let element"> {{element.name}} </mat-cell>
    </ng-container>

    <mat-header-row …