Question

我正在使用angular7 ng-select库来实现选择控件。我正在使用Angular CLI进行开发。我试图阻止更改事件触发时的事件传播。我发现在这种情况下无法防止更改事件传播。解决方法是通过编程设置所选值。

因此，我在ng-select控件中设置了[（ngModel）] =“ selectedOption”属性。在我的打字稿文件中，在由change事件触发的函数中，我设置了先前选择的值以防止对所选选项进行任何更改。但是此值未反映在ng-select控件中。我还尝试使用ChangeDetectorRef检测更改。

ng选择HTML：

 <ng-select [items]="selectOptions" bindValue="value"
    [(ngModel)]="selectedOption" (change)="onChangeOption($event)">
    <ng-template ng-label-tmp let-item="item">
    <img [src]="item.iconOption" /> {{ item.text }}
    </ng-template>
    <ng-template ng-option-tmp let-item="item">
    <img [src]="item.iconOption" class="pr-3" />{{ item.text }}
    </ng-template>
</ng-select>

完整的ts文件代码：

export class SampleComponent implements OnInit, OnChanges {

  @Input() reportStatus: string;
  selectOptions: any[];
  selectedOption: string;
  previousSelectedOption: string;

  constructor() {}

  ngOnInit() {
    this.selectedOption = this.reportStatus;
    this.previousSelectedOption = this.reportStatus;
    this.selectOptions = [
      {
        id: '1',
        value: 'draft',
        iconOption: '../../../assets/images/Draft.svg',
        text: 'Draft'
      },
      {
        id: '2',
        value: 'approved',
        iconOption: '../../../assets/images/Approved.svg',
        text: 'Approved'
      },
      {
        id: '3',
        value: 'completed',
        iconOption: '../../../assets/images/Completed.svg',
        text: 'Completed'
      },
      {
        id: '4',
        value: 'cancelled',
        iconOption: '../../../assets/images/Cancelled.svg',
        text: 'Cancelled'
      }
    ];
  }

  onChangeOption(event) {
    // cannot change status if current status is completed
    // reset to previous selected value
    if (this.previousSelectedOption === 'completed') {
      this.selectedOption = this.previousSelectedOption;
      return;
    }
    this.previousSelectedOption = event.value;
  }
}

我希望将ng-select控件中的选定值重置为先前的值。但是新更改的值是分别设置的。

我从这里尝试了接受的解决方案： set selected value in angular5 ng-select programmaticaly

但是我想知道是否有一种更简单的方法。另外，我的页面中有多个ng-select控件，因此使用ViewChild会很麻烦。

Answer 1

  onChangeOption(event) {
    setTimeout(() => {
      if (this.previousSelectedOption === 'completed') {
        this.selectedOption = this.previousSelectedOption;
        return;
      }
    });
    this.previousSelectedOption = event.value;
  }

您可以通过添加超时来达到预期的行为。

更改ngmodel后不更新所选值的原因是在onChange期间，它已经使用所选值更新了ngmodel，并且一旦将其重置回来，它将不会出现在UI中，因为它发生在同一更改中检测周期。

通过使用setTimeOut，它将看到对ngmodel所做的新更改，并将其应用于下一个更改检测周期。

无法在angular7 ng-select

1 个答案: