Angular 8.3.21中页面加载时触发ng-select的change事件失败

针对你的需求（API加载前显示'NONE'默认值、提交时传入该值，同时触发change事件），结合Angular 8的环境，提供以下可行方案：

方案一：预合并默认选项与异步数据 #

通过RxJS合并默认选项和API返回的数据，确保页面加载时'NONE'作为第一个选项存在，同时自动选中并触发change事件：

组件代码 #

import { Component, OnInit } from '@angular/core';
import { combineLatest, of, Observable } from 'rxjs';
import { map } from 'rxjs/operators';
import { YourApiService } from './your-api.service';

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.html'
})
export class YourComponent implements OnInit {
  apidata$: Observable<any[]>;
  selectedValue = 'NONE'; // 初始设置选中值为'NONE'

  constructor(private apiService: YourApiService) {}

  ngOnInit() {
    // 原始API数据Observable
    const originalApiData$ = this.apiService.getYourData();
    // 合并默认选项与API数据
    this.apidata$ = combineLatest([of([{ name: 'NONE' }]), originalApiData$]).pipe(
      map(([defaultItem, apiItems]) => [...defaultItem, ...apiItems])
    );
    // 手动调用一次change方法，确保初始逻辑执行
    this.onChangeMethod();
  }

  onChangeMethod() {
    // 你的业务逻辑，比如更新请求对象
    console.log('当前选中值:', this.selectedValue);
  }
}

模板代码 #

<ng-select [items]="apidata$ | async" 
           bindValue="name" 
           bindLabel="name" 
           [(ngModel)]="selectedValue"
           (change)="onChangeMethod()">
</ng-select>

方案二：手动控制选项与选中状态 #

如果不想修改API数据流，可在数据加载后手动添加默认选项并设置选中状态，同时触发change逻辑：

组件代码 #

import { Component, OnInit, ViewChild } from '@angular/core';
import { NgSelectComponent } from '@ng-select/ng-select';
import { Observable } from 'rxjs';
import { map } from 'rxjs/operators';
import { YourApiService } from './your-api.service';

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.html'
})
export class YourComponent implements OnInit {
  apidata: Observable<any[]>;
  selectedValue = 'NONE';
  @ViewChild('refOption', { static: true }) refOption: NgSelectComponent;

  constructor(private apiService: YourApiService) {}

  ngOnInit() {
    this.apidata = this.apiService.getYourData().pipe(
      map(items => {
        // 检查是否已存在'NONE'选项，不存在则添加
        const hasNone = items.some(item => item.name === 'NONE');
        if (!hasNone) {
          items.unshift({ name: 'NONE' });
        }
        return items;
      })
    );
    // 初始加载时手动选中'NONE'并触发方法
    setTimeout(() => {
      this.refOption.select({ name: 'NONE' });
      this.onChangeMethod();
    }, 0);
  }

  onChangeMethod() {
    console.log('当前选中值:', this.selectedValue);
    // 更新请求对象的逻辑
  }
}

模板代码 #

<ng-select [items]="apidata | async" 
           bindValue="name" 
           bindLabel="name" 
           #refOption
           [(ngModel)]="selectedValue"
           (change)="onChangeMethod()">
</ng-select>

关键说明 #

1. ng-select的change事件仅在选中值发生变更时触发，初始加载时若选中值不在选项列表中，事件不会触发，因此必须确保'NONE'是选项的一部分
2. Angular 8中ViewChild需指定static: true才能在ngOnInit中获取组件实例
3. 若使用异步管道，需确保默认选项与API数据合并后，初始选中值selectedValue存在于选项列表内

内容的提问来源于stack exchange，提问作者GM_9