为啥 ngfor 指令不起作用，尽管我在 Typescript 类中创建了正确的对象

Posted 2023-03-05

【中文标题】为啥 ngfor 指令不起作用，尽管我在 Typescript 类中创建了正确的对象

【英文标题】：Why ngfor directive is not working, though I have created proper object in Typescript class为什么 ngfor 指令不起作用，尽管我在 Typescript 类中创建了正确的对象

【发布时间】：2022-01-21 01:40:19

【问题描述】：

我在 Typesript 中创建了适当的成分对象，也为该对象创建了适当的“模型”。虽然 ngfor 指令不起作用。我在浏览器中检查时收到此错误“NG0303：无法绑定到 'ngforOf'，因为它不是 'a' 的已知属性”。

我的型号代码

export class Ingredient 
constructor(public name: string, public amount: number)

我的 TypeScript 代码

import  Component, OnInit  from '@angular/core';
import  Ingredient  from '../shared/ingredient.model';

@Component(
  selector: 'app-shopping-list',
  templateUrl: './shopping-list.component.html',
  styleUrls: ['./shopping-list.component.css']
)
export class ShoppingListComponent implements OnInit 

  ingredients: Ingredient[] = [

    new Ingredient ("Apple", 5),
    new Ingredient ("Tomato", 5)
  ];

  constructor()  

  ngOnInit(): void 
  

我的 HTML 代码

<div class="row">
    <div class="col-xs-10">
        <app-shopping-edit></app-shopping-edit>
        <hr>
        <ul class = "list-group">
            <a class = "list-group-item" 
            style = "cursor : pointer"
            *ngfor = "let ingredient of ingredients">
             ingredient.name ( ingredient.amount)
            </a> 
        </ul>
    </div>
</div>

页面加载正常，但成分未加载。在浏览器中检查此错误“NG0303：无法绑定到'ngforOf'，因为它不是'a'的已知属性”即将到来。

有人可以帮忙吗。

【参考方案1】：

如果您在 AppModule 中，请检查您的导入数组中是否有 BroswerModule。 如果您在某个不同的模块中，请检查 CommonModule 是否是该模块数组的一部分。 CommonModule 在您的特定情况下为我们提供了核心 Angular 功能，例如 *ngIf 或 *ngFor。 另请注意，您输入的是*ngfor 而不是*ngFor。

【参考方案2】：

尝试将*ngFor 移动到ul 标记内。

编辑：你有一个错字。它是*ngFor=""，而不是*ngfor=""。