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

当我尝试清除模型时,它会第一次工作,但随后不会清除标签。 的HTML

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

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

qwweerrttyyuuiioop 回答:如何从后面的代码中删除选定的标签tag-input 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);
    }

}
本文链接:https://www.f2er.com/1236638.html

大家都在问