Question

大家好=）我已经开始练习Angualar 9，我真的很喜欢组件方法。为了练习属性和事件绑定，我开始了一个带有两个列表的deckbuilding组件项目。英语不是我的主要语言，但我会尽力解释清楚。

重要：我真的很想练习这个工具，所以您能否在回答中说明您的理由？如果您有解决方案，我也可以自己搜索以进行学习。

目标：

我有两个列表（CardlistComponent和DecklistComponent），每次我单击CardListComponent（或DecklistComponent）中的一个LI时，都会删除此相同元素，但会将其添加到另一个列表中。

组件：

DeckbuilderComponent，其中包含我的其他两个组件（两个列表）
CardlistComponent（第一个列表）
DecklistComponent（第二个列表）

问题：

我可以删除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

Answer 1

您可以将DeckbuilderComponent设计为容器组件，并将CardlistComponent, DecklistComponent设计为演示组件

source

容器组件：这些组件知道如何从中检索数据服务层。请注意，路线的顶级组件是通常是一个容器组件，这就是为什么这种类型的组件原来这样命名的

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运算符可拆分的可观察对象

Angular 9-将已删除的li添加到另一个ul-事件绑定

1 个答案: