无法在 angular7 ng-select 中使用 ngModel 设置所选项目值答案

【问题标题】：Cannot set selected item value using ngModel in angular7 ng-select无法在 angular7 ng-select 中使用 ngModel 设置所选项目值
【发布时间】：2019-10-01 16:05:51
【问题描述】：

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

所以，我在我的 ng-select 控件中设置了一个 [(ngModel)]="selectedOption" 属性。在我的打字稿文件中，在由更改事件触发的函数中，我设置了先前选择的值以防止所选选项发生任何更改。但是这个值并没有反映在 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 会很麻烦。

【问题讨论】：

所以您希望始终选择相同的项目？您如何确定要选择的初始项目？
并非总是如此。我检查了几个条件来确定是否更改状态。为了简单起见，我跳过了检查这些条件的代码。令人惊讶的是，以编程方式在 ngModel 中成功设置了初始值。
previousSelectedOption 的值在哪里设置
@DilaniAlwis 我在构建选项数组的 ngOnInit() 中设置。
能贴出完整的代码吗？

标签： angular selecteditem selected selectedvalue angular-ngselect

【解决方案1】：

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

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

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

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

【讨论】：