同一元素上的*ngIf和* ngFor重复]

Question

当我在同一个元素上使用*ngFor和*ngIf时，我遇到了一个问题。

  <div
    *ngFor="let recipeStep of RecipeSteps; let i = index"
    *ngIf="position === i">
    {{ recipeStep }}
  </div>

  <button ion-button small (click)="previous()">Previous</button>
  <button ion-button small (click)="next()">Next</button>

我知道简单的解决方案是在新元素上移动*ngIF。例如：

<ng-container *ngIf="position === i">
 <div *ngFor="let recipeStep of RecipeSteps; let i = index">
  {{ recipeStep }}
 </div>
<ng-container>

但是当我使用这个解决方案时，我不能使用i变量。并且这个解决方案隐藏了上的所有元素

所以，这个扣子现在没用了

<button ion-button small (click)="previous()">Previous</button>
<button ion-button small (click)="next()">Next</button>

这个字体填充

position: number;
ionViewDidLoad() {
  this.position = 1; 
}

next() {
  this.position = this.position + 1;
}
previous() {
  this.position = this.position - 1;
}

我的问题是在同一个元素上使用*ngFor和*ngI有不同的方法吗。

如果没有办法，还有其他方法可以使这些按钮有用吗




Answer 1

正如你在这里的答案中看到的，Angular 不支持一个元素上的多个结构指令。

您需要在*ng中使用*ng如果：

<div *ngFor="let recipeStep of RecipeSteps; let i = index">
  <div *ngIf="position === i">
   {{ recipeStep }}
  </div>
</div>

Answer 2

你只需要把 ngIf 和 ngFor 反过来：

 <div *ngFor="let recipeStep of RecipeSteps; let i = index">
  <ng-container *ngIf="position === i">{{ recipeStep }}</ng-container>
 </div>