大家好=)我已经开始练习Angualar 9,我真的很喜欢组件方法。为了练习属性和事件绑定,我开始了一个带有两个列表的deckbuilding组件项目。英语不是我的主要语言,但我会尽力解释清楚。
重要:我真的很想练习这个工具,所以您能否在回答中说明您的理由?如果您有解决方案,我也可以自己搜索以进行学习。
目标:
我有两个列表(CardlistComponent和DecklistComponent),每次我单击CardListComponent(或DecklistComponent)中的一个LI时,都会删除此相同元素,但会将其添加到另一个列表中。
组件:
问题:
我可以删除CardlistComponent中的元素,但是不能将相同的元素添加到DecklistComponent中。我想问题是我在Javascript中使用数组的方式。
DeckbuilderComponent(HTML) (父组件)
<app-cardlist></app-cardlist>
<app-decklist
(cardAdded)="onCardAdded($event)">
</app-decklist>
* DeckbuilderComponent(TS)* (父组件),我想其中的一个问题是因为我重复了在DecklistComponent的父 AND 中添加项目的逻辑
@Output() cardAdded = new EventEmitter<{name: string}>();
decklist: Card[] = [
new Card('CardC'),
new Card('CardD')
]
onCardAdded(element : HTMLLIElement){
this.decklist.push({
name: element.textContent
})
}
CardlistComponent
@Output() cardRemoved = new EventEmitter<{cardName: string}>();
cardlist: Card[] = [
new Card('CardA'),
new Card('CardB')
]
removeCard(indexCard: number, element: HTMLLIElement){
this.cardlist.splice(indexCard, 1)
this.cardRemoved.emit({
cardName: element.textContent
});
DecklistComponent (该列表必须接收第一个列表中删除的元素)
@Input() cardName: {name: string};
decklist: Card[] = [
new Card('CardC'),
new Card('CardD')
]
onCardAdded(element : HTMLLIElement){
this.decklist.push({
name: element.textContent
})
}
这里是我两个组件的HTML,以防万一。
DecklistComponent(HTML)
<div class="container">
<div class="col-xs-12">
<ul class="list-group">
<li
*ngFor="let card of decklist; let indexCard=index"
class="list-group-item"
#cardName
>
<a href="#" class="list-group-item list-group-item-action" >{{ card.name }}</a>
</li>
</ul>
</div>
CardlistComponent(HTML)
<div class="container">
<div class="col-xs-12">
<ul class="list-group">
<li *ngFor="let card of cardlist; let indexCard=index" class="list-group-item">
<a href="#"
(click)="removeCard(indexCard, card)"
class="list-group-item list-group-item-action">{{ card.name }}</a>
</li>
</ul>
</div>
如果您想要我没有提及的其他内容,请随时告诉我,并祝您有美好的一天,代码= D
答案 0 :(得分:0)
您可以将DeckbuilderComponent
设计为容器组件,并将CardlistComponent, DecklistComponent
设计为演示组件
容器组件:这些组件知道如何从中检索数据 服务层。请注意,路线的顶级组件是 通常是一个容器组件,这就是为什么这种类型的组件 原来这样命名的
Presentational组件-这些组件仅将数据作为输入 并知道如何在屏幕上显示它。他们还可以发出自定义 事件
<deck-list (remove)="removeAndMoveTo($event, deckList, cardList)" [items]="deckList"></deck-list>
<card-list (remove)="removeAndMoveTo($event, cardList, deckList)" [items]="cardList"></card-list>
<div class="container">
<div class="col-xs-12">
<ul class="list-group">
<li *ngFor="let card of cardlist; let indexCard=index" class="list-group-item">
<a href="#"
(click)="removeCard(card)"
class="list-group-item list-group-item-action">{{ card.name }}</a>
</li>
</ul>
</div>
class CardlistComponent {
@Output("remove") removeCardEmitter: EventEmitter<Card>;
constructor() {
this.removeCardEmitter = new EventEmitter();
}
removeCard(card: Card){
this.removeCardEmitter.emit(card);
};
}
class DeckbuilderComponent {
cardList: Card[];
decklist: Card[];
constructor() {
this.cardList = [
new Card('CardA'),
new Card('CardB')
];
this.decklist = [
new Card('CardC'),
new Card('CardD')
];
}
removeAndMoveTo(card: Card, sourceList: Card[], targetList: Card[]) {
this.sourceList = this.sourceList.filter(pr => pr.id === card.id);
this.targetList.push(card);
}
}
当然,它们是将元素从一个列表移动到另一个列表的许多解决方案。您也可以有一个列表,每张卡都有一些信息,它属于该组。然后value
输入活页夹看起来像[items]="list.filter(pr => pr.isInCardList)
。
另一种单列表方法可能使用rxjs。一个partition运算符可拆分的可观察对象