Arrays 角度9-将删除的li添加到另一个ul-Eventbinding

大家好=）我已经开始练习Angular 9，我非常喜欢组件方法。为了实践property和eventbinding，我启动了一个包含两个列表的deckbuilding组件项目。英语不是我的主要语言，但我会尽量解释清楚

重要：我真的很想练习这个工具，所以你能在回答中解释一下你的推理吗？如果您有解决方案跟踪，我也可以自己搜索以便学习

目标：

我有两个列表（CardlistComponent和DecklistComponent），每次单击CardlistComponent（或DecklistComponent）中的一个LI时，该元素将被删除，但会添加到另一个列表中

组件：

DeckbuilderComponent包含我的另外两个组件（两个列表）

CardlistComponent（第一个列表）

DecklistComponent（第二个列表）

问题：

我可以删除CardlistComponent中的元素，但无法将同一元素添加到DecklistComponent。我想问题在于我在Javascript中使用数组的方式

DeckbuilderComponent（HTML）（父组件）

---

这是我的两个组件的HTML以防万一

DecklistComponent（HTML）

CardlistComponent（HTML）

---

如果您还想要一些我没有提到的东西，请毫不犹豫地告诉我，祝您度过一个充满code=D的美好的一天。

您可以将

DeckbuilderComponent

设计为容器组件，将

CardlistComponent、DecklistComponent

设计为表示组件

容器组件：这些组件知道如何从中检索数据 服务层。请注意，管线的顶级组件是 通常是容器组件，这就是为什么这种类型的组件 最初是在哪里这样命名的

表示组件-这些组件只是将数据作为输入 并且知道如何在屏幕上显示它。它们还可以发出自定义的声音 事件

类CardlistComponent{
@输出（“移除”）RemoveCardCommitter:EventEmitter；
构造函数（）{
this.removeCardEmitter=neweventemitter（）；
}
移除卡片（卡片：卡片）{
此.removecardmitter.emit（卡）；
};
}

class DeckBuilder组件{
卡片列表：卡片[]；
行李清单：卡片[]；
构造函数（）{
this.cardList=[
新卡（“信用卡”），
新卡（“卡B”）
];
此.decklist=[
新卡（“CardC”），
新卡（“卡”）
];
}
removeAndMoveTo（卡：卡，源列表：卡[]，目标列表：卡[]）{
this.sourceList=this.sourceList.filter（pr=>pr.id==card.id）；
此.targetList.push（卡片）；
}
}

当然，它们是许多将元素从一个列表移动到另一个列表的解决方案。你也可以有一个列表，每张卡片都有它所属的组的一些信息。然后，

value

输入活页夹看起来像

[items]=“list.filter（pr=>pr.isInCardList）

---

另一种单列表方法可能会使用rxjs。一个可观察的对象可以使用操作符进行拆分

您可以将

DeckbuilderComponent

设计为容器组件，将

CardlistComponent、DecklistComponent

设计为表示组件

容器组件：这些组件知道如何从中检索数据 服务层。请注意，路由的顶级组件是 通常是容器组件，这就是为什么这种类型的组件 最初是在哪里这样命名的

表示组件-这些组件只是将数据作为输入 并且知道如何在屏幕上显示。他们还可以发出自定义 事件

类CardlistComponent{
@输出（“移除”）RemoveCardCommitter:EventEmitter；
构造函数（）{
this.removeCardEmitter=neweventemitter（）；
}
移除卡片（卡片：卡片）{
此.removecardmitter.emit（卡）；
};
}

class DeckBuilder组件{
卡片列表：卡片[]；
行李清单：卡片[]；
构造函数（）{
this.cardList=[
新卡（“信用卡”），
新卡（“卡B”）
];
此.decklist=[
新卡（“CardC”），
新卡（“卡”）
];
}
removeAndMoveTo（卡：卡，源列表：卡[]，目标列表：卡[]）{
this.sourceList=this.sourceList.filter（pr=>pr.id==card.id）；
此.targetList.push（卡片）；
}
}

当然，将元素从一个列表移动到另一个列表有很多解决方案。你也可以有一个列表，每张卡片都有它所属的组的一些信息。然后，

值

输入活页夹看起来像

[items]=“list.filter（pr=>pr.isInCardList）

---

另一种单列表方法可能使用rxjs。一个被运算符拆分的可观察对象

您通过

@Input

和

@Output

在两个组件中交互，那么它们必须具有相同的父对象。如果您有这种父子结构，我们希望看到您的父组件和htmlts@Kenny你说得对，我添加了父级（Deckbuilder）。我更了解问题所在，但不知道如何解决。正如你所说，问题可能在于阵列。而不是按名称删除

<app-cardlist></app-cardlist>
<app-decklist
  (cardAdded)="onCardAdded($event)">
</app-decklist>

  @Output() cardAdded = new EventEmitter<{name: string}>();

  decklist: Card[] = [
    new Card('CardC'),
    new Card('CardD')
  ]

  onCardAdded(element : HTMLLIElement){
    this.decklist.push({
    name: element.textContent
  })
 }

  @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
 });

  @Input() cardName: {name: string};

  decklist: Card[] = [
    new Card('CardC'),
    new Card('CardD')
  ]

  onCardAdded(element : HTMLLIElement){ 
    this.decklist.push({
    name: element.textContent
  })
}

<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>

<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>