`*ngFor` 運算式缺少 `let` 關鍵字

當 *ngFor 中使用的運算式缺少 let 關鍵字時，就會發出這項診斷。

import {Component} from '@angular/core';

@Component({
  // The `let` keyword is missing in the `*ngFor` expression.
  template: `<div *ngFor="item of items">{{ item }}</div>`,
})
class MyComponent {
  items = [1, 2, 3];
}

這樣寫有什麼問題？

缺少 let 代表 *ngFor 字串中有語法錯誤。這也表示 item 不會被正確引入作用域，{{ item }} 也無法正確解析。

我應該怎麼做？

補上漏掉的 let 關鍵字。

import {Component} from '@angular/core';

@Component({
  // The `let` keyword is now present in the `*ngFor` expression,
  // no diagnostic messages are emitted in this case.
  template: `<div *ngFor="let item of items">{{ item }}</div>`,
})
class MyComponent {
  items = [1, 2, 3];
}

設定需求

任何擴充診斷要發出訊息，都必須啟用 strictTemplates。 missingNgForOfLet 除了 strictTemplates 之外，沒有其他額外需求。

如果無法避免，該怎麼辦？

可以透過編輯專案的 tsconfig.json 檔案來停用這項診斷：

{
  "angularCompilerOptions": {
    "extendedDiagnostics": {
      "checks": {
        "missingNgForOfLet": "suppress"
      }
    }
  }
}

詳情請見擴充診斷設定。