错误无法绑定 *ngFor答案

【问题标题】：Errorcan't bind *ngFor错误无法绑定 *ngFor
【发布时间】：2020-04-08 20:19:01
【问题描述】：

我是 Angular 的初学者，我正在尝试创建一个看起来像 CapitalistAdventure 的应用程序。但我有一个无法解决的错误，希望得到一些帮助。首先是我的应用程序的外观：

错误位于 app.component.html 并显示：

无法绑定到“产品”，因为它不是“应用产品”的已知属性。 1. 如果 'app-product' 是一个 Angular 组件并且它有 'product' 输入，那么验证它是这个模块的一部分。 2. 如果 'app-product' 是一个 Web 组件，则将 'CUSTOM_ELEMENTS_SCHEMA' 添加到该组件的 '@NgModule.schemas' 以禁止显示此消息。 3. 要允许任何属性添加“NO_ERRORS_SCHEMA”到该组件的“@NgModule.schemas”。

这是我的 app.component.html 的代码：

  <h1><span id="WorldName">{{world.name}}WORLDNAME</span></h1>
  <!--<span id="WorldImage"><img [attr.src]="server+world.logo"/></span>-->
  <div class="UserData">
    <div class="Money">
      <span id="MoneyName">Money:</span>
      <br>
      <!--<span [innerHTML]="world.money | bigvalue"></span>-->
      <span>$</span>
    </div>
    <div class="Buy">
      <span id="BuyName">Buy</span>
    </div>
    <div class="ID">
      <span id="MoneyName">ID :</span>
    </div>
  </div>
  <div class="Game">
    <div class="UpgradeContainer">
      <div class="Upgrade" (click)="setModal('Unlock')">Unlocks</div>
      <div class="Upgrade" (click)="setModal('Cash')">Cash</div>
      <div class="Upgrade" (click)="setModal('Angels')">Angels</div>
      <div class="Upgrade" (click)="setModal('Managers')">Managers</div>
      <div class="Upgrade" (click)="setModal('Investors')">Investors</div>
    </div>
    <div class="ProductContainer">
      <app-product *ngFor="let product of products" [product]="product"></app-product>
    </div>
</div>

我的 app.module.ts：

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { RestserviceService } from 'src/app/restservice.service';
import { HttpClientModule } from '@angular/common/http';
import { ProductComponent } from './product/product.component';
import { BigvaluePipe } from './bigvalue.pipe';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import {MatProgressBarModule} from '@angular/material/progress-bar';
@NgModule({
  declarations: [
    AppComponent,
    ProductComponent,
    BigvaluePipe,
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    HttpClientModule,
    BrowserAnimationsModule,
    MatProgressBarModule,
  ],
  providers: [RestserviceService],
  bootstrap: [AppComponent]
})
export class AppModule { }

我的 app.component.ts：

 import { Component } from '@angular/core';
import { RestserviceService } from './restservice.service'; 
import { World, Product, Pallier } from './world';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})

export class AppComponent {
  title = 'AngularProject';
  world: World = new World(); 
  server: String;
  products = [1,2,3,4,5,6];
  modal: String;

  constructor(private service: RestserviceService) { 
    this.server = service.getServer(); 
    service.getWorld().then(world => { this.world = world; });   
  }

  setModal(value: String){
    this.modal = value;
  }
}

我的product.component.html：

<div class="Product">
  <div class="ProductInfo">
    <img onclick="alert('Production lancé'), starFabrication() " class="ProductImage" src="./assets/Avatar.jpg">
    <!--<mat-progress-bar mode="determinate" class="ProgressBar" [value]="progressbarvalue"></mat-progress-bar>-->
    <div class="ProductNumber">ProductNumber</div>
    <div class="ProductPrice">ProductPrice</div>
  </div>
</div>

最后是我的 product.component.ts：

import { Component, OnInit, Input } from '@angular/core';
import { Product } from 'src/app/world';

@Component({
  selector: 'app-product',
  templateUrl: './product.component.html',
  styleUrls: ['./product.component.css']
})
export class ProductComponent implements OnInit {
  product: Product;
  @Input()
  set prod(value: Product){
    this.product = value;
  }

  constructor() { }

  ngOnInit(): void {
  }

}

我很精确，但我使用的是 Angular 9。

提前感谢愿意花时间帮助我的人。

【问题讨论】：

标签： html angular typescript visual-studio-code angular9

【解决方案1】：

您需要移动 @Input() 装饰器以绑定到 product 变量。试试下面的

export class ProductComponent implements OnInit {
  @Input()
  product: Product;

  constructor() { }

  ngOnInit(): void {
  }
}

或

如果您希望将 @Input() 装饰器与 setter 一起使用，则需要在模板中绑定到它的名称。

控制器

export class ProductComponent implements OnInit {
  product: Product;

  @Input()
  set prod(value: Product){
    this.product = value;
  }

  constructor() { }

  ngOnInit(): void { }
}

模板

<app-product *ngFor="let product of products" [prod]="product"></app-product>

【讨论】：