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

Question

我想添加带有新标签的筹码，它们应该被很好地排序，所以接下来的下一个筹码应该紧挨着第一个筹码，第三个应该在第二个筹码之后等等。同时添加按钮也应该移到右侧，所以它总是在最后创建的芯片的前面。直到现在我只有添加新芯片的功能。我不希望您进行编码工作，只是告诉我我该怎么做，或者您是否有可以复制的代码示例。因为我没有在网上找到任何教程或视频。我现有的代码如下。

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>

<button class="buttonIcon" ion-button small round icon-only (click)="add(chip)">  <!--When "add" button is pressed -> opens searchbar (not done yet)-->
  <ion-icon name="add"></ion-icon>
</button>

TS

public tagName = [
    {
      "tag": "#men"

    },
  ];
…

 add(chip: Element) {
    this.tagName.push();

  }

Answer 1

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

这样试试

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>

你可以参考 stackblitz demo

Answer 2

为简单起见，使用 push 添加和 splice 删除。对于添加你不需要任何参数的方法，但对于删除，只需传递芯片的 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

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

Demo

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

How to add a new chip so its nicely ordered and button shifting?

typescript

ionic-framework

ionic2

angular