import { Item } from './item';
export const ITEMS: Item[] = [
{ id: 21, name: "Halatul Betivan", type: "armura", intelligence: 2, agility: 4, attackpower: 1},
{ id: 22, name: "Tricou Gucci", type: "armura", intelligence: 5, agility: 2, attackpower: 4},
{ id: 23, name: "Pantofi Mike", type:"cizme", intelligence: 2, agility: 4, attackpower: 3},
{ id: 24, name: "Louis Vuitton", type: "casca", intelligence: 4, agility: 4, attackpower: 3},
{ id: 25, name: "Staniol", type: "armura", intelligence: 7, agility: 2, attackpower: 5},
{ id: 26, name: "Versace", type: "armura", intelligence: 2, agility: 4, attackpower: 3},
{ id: 27, name: "Air Force 1", type: "cizme", intelligence: 4, agility: 4, attackpower: 1},
{ id: 28, name: "Jordan", type: "casca", intelligence: 1, agility: 4, attackpower: 6},
{ id: 29, name: "New York", type: "casca", intelligence: 1, agility: 6, attackpower: 4},
{ id: 20, name: "Geaca Piele", type: "armura", intelligence: 2, agility: 8, attackpower: 1},
{ id: 31, name: "Ciocate", type: "cizme", intelligence: 2, agility: 4, attackpower: 3},
{ id: 32, name: "Sandale Crocs", type: "cizme", intelligence: 4, agility: 6, attackpower: 4},
{ id: 33, name: "Tricou Negru", type: "armura", intelligence: 2, agility: 3, attackpower: 3},
{ id: 34, name: "Pantofi Lacoste", type: "cizme", intelligence: 2, agility: 2, attackpower: 6},
{ id: 35, name: "Palarie Gangster", type: "casca", intelligence: 4, agility: 4, attackpower: 3},
{ id: 36, name: "Sapca FCSB", type: "casca", intelligence: 6, agility: 3, attackpower: 3},
{ id: 37, name: "Tricou FCSB", type: "armura", intelligence: 2, agility: 6, attackpower: 3},
{ id: 38, name: "Adidas Editie Limitata FCSB", type: "cizme", intelligence: 4, agility: 2, attackpower: 1},
]
<h2>Items shop</h2>
<mat-selection-list>
<mat-list-item *ngFor="let item of items"
[class.selected]="item === selectedItem"
(click)="onSelect(item)">
<span class="mat-badge"></span> {{item.name}}
</mat-list-item>
</mat-selection-list>
<mat-divider></mat-divider>
<div *ngIf="selectedItem">
<h2>Detalii: {{selectedItem.name | uppercase}}</h2>
<div><span>id: </span>{{selectedItem.id}}</div>
<div>
<label>name:
<input [(ngModel)]="selectedItem.name" placeholder="name"/>
</label>
</div>
<div><span>intelligence: {{selectedItem.intelligence}}</span></div>
<div><span>agility: {{selectedItem.agility}}</span></div>
<div><span>attackpower: {{selectedItem.attackpower}}</span></div>
<button mat-fab>Buy</button>
我得到了这段代码来显示这些项目，但是我不知道如何将它们添加到另一个组件中
单击“购买”时，如何从此数组生成一个项目以添加到另一个库存组件？ 我对此有点陌生，但我花了太多的时间去寻找解决这个问题的办法。
好的，所以您只需要维护用户点击了购买按钮的项目列表。
因此在。ts文件中声明名为BuyedItems的新变量。 并添加用于添加项的方法。
public buyedItems:any[]=[];
addItems(item){
this.buyedItems.push(item)
}
现在，在html中添加以下行，用于使用inventory组件。 假设您的组件标记是
<app-inventory [buyedItems]=buyedItems></app-inventory>
并使用以下代码更新html:
<h2>Items shop</h2>
<mat-selection-list>
<mat-list-item *ngFor="let item of items"
[class.selected]="item === selectedItem"
(click)="onSelect(item)">
<span class="mat-badge"></span> {{item.name}}
</mat-list-item>
</mat-selection-list>
<mat-divider></mat-divider>
<div *ngIf="selectedItem">
<h2>Detalii: {{selectedItem.name | uppercase}}</h2>
<div><span>id: </span>{{selectedItem.id}}</div>
<div>
<label>name:
<input [(ngModel)]="selectedItem.name" placeholder="name"/>
</label>
</div>
<div><span>intelligence: {{selectedItem.intelligence}}</span></div>
<div><span>agility: {{selectedItem.agility}}</span></div>
<div><span>attackpower: {{selectedItem.attackpower}}</span></div>
<button mat-fab (click)="addItem(selectedItem)">Buy</button>
并在inventory组件中将@Input作为BuyedItems。
