时间戳

首页 > 解决方案 > 如何使用 ngx-chips 设置初始值

javascript - 如何使用 ngx-chips 设置初始值

问题描述

我在设置初始值时遇到问题tag-input。当admin点击编辑按钮时，tag-input必须从database. 我怎样才能做到这一点 ？这是我的代码示例：

<tag-input formControlName="ticketTypes">
  <tag-input-dropdown
    [showDropdownIfEmpty]="true"
    [dynamicUpdate]="false"
    [focusFirstElement]="true"
    [displayBy]="'name'"
    [identifyBy]="'name'"
    [autocompleteItems]="ticketType"
 >
   <ng-template let-item="item" let-index="index">
     {{ item.name }}
   </ng-template>
 </tag-input-dropdown>
</tag-input>

这是一些ts：

setHall() {
    if (this.halls !== undefined) {
      this.loadFirst = false;
      this.halls.forEach(hall => {
        console.log(hall.ticketTypes);
        this.formArray.push(
          this.fb.group({
            name: hall.name,
            availableWindowCount: hall.availableWindowCount,
            totalWindowCount: hall.totalWindowCount,
            ticketTypes: []
          })
        );
      });
    }
  }

当用户单击编辑按钮时调用上述函数，它会抛出一些数据并将其设置在表单组中。但我需要在tag-input. 我真正想要的是当用户点击标签输入上的一些初始值的编辑按钮时。我究竟做错了什么 ？。

标签： javascriptangularngx-chips

解决方案

有一个(onFocus)="onInputFocused($event)"事件。在那里，您可以调用您的服务器并使用检索到的示例数据填写表格。例如

this.service.getTicketTypes().then(tt=>{
    this.form.controls.ticketTypes.setValue(JSON.parse(tt));
})

推荐阅读