以编程方式强制选择primeng列表框（p-listbox）中的项目。 Angular 2 / PrimeNg

Question

我有一个列表，我使用PrimeNg列表框（p-listbox）显示。它是一个组列表，通过实现ngDoCheck生命周期钩子，我可以在其中查看选择的更改。 ngDoCheck下的每次更改都创建了一个条件，用于检查选择是否为特定组（“Group0”）。如果用户选择“Group0”，我想强制选择p-listbox回到之前选择的组。我能够确定以前选择的组并将其等同于selectedGroup但它不起作用。以下是代码：

export class AppComponent implements OnInit, DoCheck{

    selectedGroup: any;
    groups: any [] = [];
    groupList: SelectItem [] = [] ;
    differ: any;

    constructor(private differs:  KeyValueDiffers) {
       this.groups = [
         {"groupId": 1, "groupName": "Group1"},
         {"groupId": 2, "groupName": "Group2"},
         {"groupId": 3, "groupName": "Group3"},
         {"groupId": 4, "groupName": "Group4"},
         {"groupId": 5, "groupName": "Group5"},
         {"groupId": 0, "groupName": "Group0"}
      ];
      this.differ = differs.find([]).create(null);
    }


    ngOnInit() {
      this.groups.forEach(gp=> this.groupList.push({label: gp.groupName, value: gp}));
      this.selectedGroup =  this.groups[0];
    }

    ngDoCheck() {
      var changesInSelectedGroup= this.differ.diff(this.selectedGroup);
      if (changesInSelectedGroup && this.selectedGroup!=undefined) {
            if(this.selectedGroup.groupId==0) {

              let previousVal: string = this.differ._appendAfter.previousValue;
              let currentVal: string = this.differ._appendAfter.previousValue;
              this.selectedGroup = this.groups.find(gp=> gp.groupName==previousVal);
             // alert('Group0 selected. Selection should go back to previously selected group');
            }
            console.log(this.differ._appendAfter.previousValue);
      }
    }
}

我为此创建了一个plunkr。 http://plnkr.co/edit/oLoCEMT4zxqCApUL4Isn?p=preview

Answer 1

Angular的NgModel指令与相应的ControlValueAccessor进行通信，如下所示：

所以我建议按如下方式解决您的问题：

<强> template.html

将模板引用变量添加到p-listbox元素

<p-listbox #listBox [options]="groupList" [(ngModel)]="selectedGroup"></p-listbox>

<强> component.ts

ngDoCheck() {
   var changesInSelectedGroup= this.differ.diff(this.selectedGroup);
   if (changesInSelectedGroup && this.selectedGroup!=undefined) {
     if(this.selectedGroup.groupId==0) {

       let previousVal: string = this.differ._appendAfter.previousValue;
       let currentVal: string = this.differ._appendAfter.previousValue;
       this.selectedGroup = this.groups.find(gp=> gp.groupName==previousVal);
       // alert('Group0 selected. Selection should go back to previously selected group');
     }
     console.log(this.differ._appendAfter.previousValue);
  }
}

覆盖onChange

的onModelChange（您的案例中为ControlValueAccessor）事件

@ViewChild('listBox') accessor: Listbox;
@ViewChild('listBox', { read: NgModel }) model: NgModel;

ngOnInit() {
  ...
  this.accessor.registerOnChange = (fn: (val: any) => void) => {
    this.accessor.onModelChange = (val) => {
      if(val && val.groupId === 0) {
        this.model.control.setValue(this.model.value);
        return;
      }
      return fn(val);
    };
  }

<强> Plunker Example