ngFor和ngIf Angular2的模板標簽問題

Question

我在嘗試在模板標簽中使用ngFor和ngIf時遇到了一個奇怪的問題。 我試圖在Analyst對象中顯示標簽標題，如下所示：

分析師對象：

class Analyst {
  private _properties = {labels: [{title:'a'}]};

  get labels() {
    return this._properties.labels;
  }  

  set labels(labels:Array<string>) {
    this._properties.labels = labels;
  }      
}

組件模板：

<div *ngFor="let analyst of analysts; let i = index">
  <h2>Analyst {{i}}</h2>
  <template ngFor let-label [ngForOf]="analyst.labels"
                              [ngIf]="analyst.labels.length > 0">
    <div>{{label.title}}</div>
  </template>
</div>

我一直在收到錯誤

無法讀取undefined的屬性'title'

在以下情況下，錯誤消失：

• 刪除[ngIf]時
• 使用json管道而不是title屬性{{label | JSON}}。 打印到屏幕的json字符串包含title屬性。

plunker中完整代碼的鏈接

任何人都可以解釋為什么會這樣嗎？

謝謝！

Answer 1

您不能在同一元素上擁有多個結構指令

請改用

<div *ngFor="let analyst of analysts; let i = index">
  <h2>Analyst {{i}}</h2>
  <ng-container *ngFor="let label of analyst.labels">
    <div *ngIf="label.length > 0">{{label.title}}</div>
  </ng-container>
</div>

Answer 2

你不能在同一個元素上有兩個以上的結構指令

@Component({
  selector: 'my-app',
  template: `
  <button (click)="addLabel()">add</button>
  <div *ngFor="let analyst of analysts; let i = index">
    <h2>Analyst {{i}}</h2>
    <template ngFor [ngForOf]="analyst.labels" let-label>
            <div *ngIf ="analyst.labels.length > 0">
          <div>{{label.title}}</div>
          </div>
      </template>
    </div>
  `,
})