Question

我正在使用角度6 ngx芯片作为来自此链接https://github.com/Gbuomprisco/ngx-chips的输入标签。我从父组件更改了数组，并在子组件中看到了这些更改，但在下拉菜单中却没有看到。如果我现在想看到此更改，我应该再次重新打开下拉菜单。那么有人可以帮助我解决此问题吗？谢谢。这是我的代码：`

@Component({
  selector: 'app-root',
  templateUrl: '<app-tag-input-a [(roles)]="role" [search]="theBoundCallback"></app-tag-input-a>'
}
export class AppComponent implements OnInit {
 ngOnInit() {
    this.theBoundCallback = this.onSearch.bind(this);
  }
  titles = ['iTem1', 'item2', 'item3', 'barber', 'butcher', 'nurse'];
  role = ['role1', 'role2', 'role3', 'role4'];
  public theBoundCallback: Function;
   ngOnInit() {
       this.theBoundCallback = this.onSearch.bind(this);
   }
first = false ;
  public async onSearch(test) {
      await this.timeOut(2000);
      if(this.first === false) {
          this.titles.push('jack');
          this.first = true;
      }
  }

  async timeOut(timer = 3000) {
      return new Promise((res, rej) => {
          setTimeout(() => {
               res(true)
           }, timer);
  });
}

孩子：

@Component({
   selector: 'app-tag-input-a',
   templateUrl: '
       <tag-input [ngModel]="roles"
            (onTextChange)="onTextChanges($event)"
             [onlyFromAutocomplete]="true">
        <tag-input-dropdown [showDropdownIfEmpty]="true"
                  [limitItemsTo] = 4
                  [dynamicUpdate]="true"
                  [appendToBody]="false"
                  [focusFirstElement]="true"
                  [keepOpen]="true"
                  [autocompleteItems]="title">
       </tag-input-dropdown>
    </tag-input>'
    <div *ngIf="loader">loading...</div>
})
  export class TagInputAComponent implements OnInit {
    loader: boolean = false;
    @Input() roles;
    @Input() search: Function;
    @Input() title;
    @Output() sharedVarChange = new EventEmitter();
    onTextChanga(newValue) {
       this.roles.push(newValue.display);
       this.sharedVarChange.emit(this.roles);
    }

    @Input() search: Function;
    async onTextChanges(search) {
      this.loader = true;
      await this.search(search);
      console.log(this.title);
      this.loader = false;
  }
}

`

示例： https://angular-qqh8r7.stackblitz.io

数组输入更改时如何更新ng芯片下拉列表

0 个答案: