Question

我正在尝试创建一个类似于网店的应用，该应用显示可以添加到购物车中的多个项目。我有一个StoreComponent，其中有ItemComponents的清单。我想在商店的表中显示所有项目。

我提供了为商店提供所有物品的服务。我能够显示商店html模板中的项目。现在，我将html封装在项目模板中，但是我不知道现在如何显示所有项目。

--- Store component ---
export class StoreComponent implements OnInit {

  private items: ItemComponent[] = ItemService.get_items();
  constructor(itemService: ItemService) {}
}    

--- Item component ---
export class ItemComponent implements OnInit {

  constructor(private _name: string, private _unitPrice: number, private 
 _description?:string, private _image?:string) { }

  ngOnInit() {
  }


  get name(){return this._name;}
  get unitPrice(){return this._unitPrice}
  get description(){return this._description;}
  get image(){return this._image;}

}    

--- store component html (worked) ---
<div id="items">
  <th>Name</th>
  <th>unitPrice</th>
  <th>description</th>
  <tr *ngFor='let item of items'>
    <td>{{item.name}}</td>
    <td>{{item.unitPrice}}</td>
    <td>{{item.description}}</td>
  </tr>
</div>    

--- New Store component html (doesn't work) ---
<div id="items">
  <th>Name</th>
  <th>unitPrice</th>
  <th>description</th>
    <app-item  *ngFor='let item of items'></app-item>
  </tr>
 </div>    

--- New Item component html (doesn't show) ---
<tr>
  <td>{{name}}</td>
  <td>{{unitPrice}}</td>
  <td>{{description}}</td>
</tr>


--- After I edited the html code, I get following error: ---

ERROR NullInjectorError: StaticInjectorError(AppModule)[ItemComponent -> 
String]: 
StaticInjectorError(Platform: core)[ItemComponent -> String]: 
NullInjectorError: No provider for String!

Answer 1

由于Item组件是父组件的子组件，因此您可以使用Input装饰器将pass data从父组件（存储）到子组件（Item）

--- Item Component --- 
export class ItemComponent implements onInit{
   @Input() item
}

--- Item component HTML ---
<tr>
  <td>{{item.name}}</td>
  <td>{{item.price}}</td>
  <td>{{item.description}}</td>
</tr>

--- Store Component ---

<div id="items">
  <th>Name</th>
  <th>unitPrice</th>
  <th>description</th>
    <app-item  *ngFor='let item of items' [item]="item"></app-item>
  </tr>
 </div>

尝试一下，如果您遇到其他麻烦，请告诉我

Answer 2

将数据传递到Angular中的组件的方式不是通过构造函数参数，而是通过输入属性（例如@Yazan Shanak所说）。

您收到的错误来自ItemComponent中的构造函数参数：

@Component(...)
export class ItemComponent implements OnInit {

  // INCORRECT
  // You can't inject the "string" type. You should inject service types.
  constructor(private _name: string, private _unitPrice: number...) { }

}

请记住，Angular使用类构造函数进行依赖注入。您的代码等效于对Angular说：“注入类型为“字符串”的依赖项，然后注入类型为“数字”的依赖项...”但是，这些依赖关系当然没有意义。

在ItemComponent中应该执行的操作是将构造函数参数更改为类属性。另外，用@Input()装饰这些类属性，以便您可以从父级StoreComponent设置它们的值。

@Component(...)
export class ItemComponent implements OnInit {
  @Input() private name: string;
  @Input() private unitPrice: number;

  // DELETE the "string" and "number" params from the constructor
  constructor() { }

}

然后，更新StoreComponent的HTML以设置ItemComponent的输入属性：

<app-item *ngFor="let item of items" [name]="item.name" [price]="item.price"></app-item>

请注意，分别传递每个item属性是次优的。您应该创建一个名为item的输入属性，然后一次传递整个项目。

<app-item *ngFor="let item of items" [item]="item"></app-item>

如何在父组件中显示组件数组？

2 个答案: