Angular 如何添加一个新的芯片，使其有序和按钮移动？

我想添加带有新标签的芯片，它们应该有序排列，因此接下来的下一个芯片应该紧挨着第一个芯片，第三个芯片应该在第二个芯片之后，等等。同时，添加按钮也应该移到右侧，因此它将始终位于创建的最后一个芯片的正前方。到目前为止，我只有添加一个新芯片的功能。我不希望你做编码工作，只要告诉我怎么做，或者你是否有可以复制的代码示例。因为我没有在网上找到任何教程或yt视频。我现有的代码如下

HTML

---

将您的添加按钮包裹在离子芯片元件中，它将在右侧对齐

像这样试试

Html

<ion-chip #chip *ngFor="let tag of tagName">

 <ion-label>{{tag.tag}}</ion-label>
  <button ion-button clear color="dark" (click)="remove(chip)">
    <ion-icon name="close-circle"></ion-icon>
  </button>
    </ion-chip>

    <ion-chip color="primary">
    <button ion-button clear color="light" (click)="add(chip)">
      <ion-icon name="add"></ion-icon>
    </button>
    </ion-chip>

{{tag.tag}

---

您可以参考stackblitz

保持简单，使用

推送

添加，使用

拼接

删除。对于添加，方法不需要任何参数，但是对于删除，只需传递芯片的id

export class Tag {
  tag: string;
  constructor(values: Object = {}) {
    Object.assign(this, values);
  }
}

...
  tagName: Tag[] = [];

  add(): void {
    let id = this.tagName.length + 1;
    this.tagName.push(new Tag({ tag: "tag" + id }, ));
  }

 remove(id: number): void {
    this.tagName.splice(id, 1);
 }

HTML

{{tag.tag}

---

Thx，谢谢你的回答。在我的项目中，我遇到了一个问题，新的芯片刚刚铺在最后一块芯片上，不像你的Blitzdemo。添加按钮也在芯片的左侧。你知道为什么吗。我完全使用了Blitz中的代码。您是否在页面中添加了任何样式？能否在stackblitz中更新整个代码

<ion-chip #chip *ngFor="let tag of tagName">

 <ion-label>{{tag.tag}}</ion-label>
  <button ion-button clear color="dark" (click)="remove(chip)">
    <ion-icon name="close-circle"></ion-icon>
  </button>
    </ion-chip>

    <ion-chip color="primary">
    <button ion-button clear color="light" (click)="add(chip)">
      <ion-icon name="add"></ion-icon>
    </button>
    </ion-chip>

export class Tag {
  tag: string;
  constructor(values: Object = {}) {
    Object.assign(this, values);
  }
}

...
  tagName: Tag[] = [];

  add(): void {
    let id = this.tagName.length + 1;
    this.tagName.push(new Tag({ tag: "tag" + id }, ));
  }

 remove(id: number): void {
    this.tagName.splice(id, 1);
 }

   <ion-chip #chip *ngFor="let tag of tagName; let i = index">
        <ion-label>{{tag.tag}}</ion-label>
        <button ion-button clear color="dark" (click)="remove(i)">
           <ion-icon name="close-circle"></ion-icon>
        </button>
  </ion-chip>


  <button class="buttonIcon" ion-button small round icon-only (click)="add(chip)">  
     <ion-icon name="add"></ion-icon>
  </button>