时间戳

首页 > 解决方案 > 如何从后面的代码中删除选定的标签 tag-input ngx-chips？

ngx-chips - 如何从后面的代码中删除选定的标签 tag-input ngx-chips？

问题描述

当我尝试清除模型时，它第一次工作，但它只是不清除标签。HTML

<tag-input theme='bootstrap'  id="test" [ngModel]="tagsSelected" [onlyFromAutocomplete]="true"   [clearOnBlur]="true" [maxItems]= maxProductModels  (onAdd)="onModelAdded($event)" (onRemove)="onModelRemoved($event)">
      <tag-input-dropdown [showDropdownIfEmpty]="true"  placeholder=""
             [autocompleteItems]="sampleData">
      </tag-input-dropdown>
  </tag-input>

在后面的代码中，我试图清除我的打字稿文件中的模型 this.tagsSelected = [];

这是第一次工作，但后来我似乎没有工作

标签： ngx-chips

解决方案

不确定您如何清除您的 tagsSelected，但首先我建议您进行 tagsSelect 2way 绑定[(ngModel)]="tagsSelected" 

<tag-input theme='bootstrap'  id="test" [(ngModel)]="tagsSelected" [onlyFromAutocomplete]="true"
           [clearOnBlur]="true" [maxItems]= "5"  (onAdd)="onModelAdded($event)" (onRemove)="onModelRemoved($event)">
    <tag-input-dropdown [showDropdownIfEmpty]="true"  placeholder=""
                        [autocompleteItems]="sampleData">
    </tag-input-dropdown>
</tag-input>

<button (click)="clear()">Reset</button>
<button (click)="pop()">pop</button>
<button (click)="add()">add</button>

组件：

import {Component, OnInit} from '@angular/core';
import {TagModel} from 'ngx-chips/core/accessor';

@Component({
    selector: 'app-ngx-chips',
    templateUrl: './ngx-chips.component.html',
    styleUrls: ['./ngx-chips.component.css']
})
export class NgxChipsComponent implements OnInit {
    tagsSelected: any [] = [];
    sampleData: any;

    constructor() {
        this.sampleData = [
            {display: 'A1', value: 'aA4'},
            {display: 'A2', value: 'aA3'},
            {display: 'A3', value: 'aA2'},
            {display: 'A4', value: 'aA1'},
        ];
    }

    clear = () => {
        this.tagsSelected = [];
    }

    add = () => {
        const display = 'x_' + this.tagsSelected.length;
        this.tagsSelected.push({display, value: display});
    }

    pop = () => {
        this.tagsSelected.pop();
    }

    ngOnInit(): void {
    }

    onModelAdded = ($event: TagModel) => {
        console.log(`$event`, $event);
    }

    onModelRemoved = ($event: TagModel) => {
        console.log(`$event`, $event);
    }

}

推荐阅读