Angular - <select> <options> 从 API 更新后的回调函数

Question

我在带有类别列表的表单中有一个<select>元素，我需要从 API 获取类别列表。

这是我的类型脚本文件。

export class ExtranetRegisterComponent implements OnInit {
    form = null;
  categories = [];
  constructor(private router: Router, private _fb: FormBuilder, private httpClient: HttpClient) {
    this.buildForm();
    var categories = this.httpClient.get('http://api.local/api/v1/categories');
    categories.subscribe(
      (data: any[]) => {
        this.categories = data;
        // Apply this code when categories gets updated in the template (DOM)
        $('select').selectric('refresh');
      }
    )
  }
  buildForm() {
    this.form = this._fb.group({
      category: ['',[]],
      subcategory: ['',[]],
      business_name: ['',[]]
    });
    this.onChanges();
  }
  onChanges(): void {
    this.form.valueChanges.subscribe(val => {
      alert('hi there');
    });
  }
  ngOnInit() {
    $(document).ready(function(){
      $('.selectric').selectric();
    });
  }
  onSubmit() {
    return false;
  }
}

下面是相关的模板文件。

<form [formGroup]="form" name="form" (submit)="onSubmit()">
    <div class="form-row">
        <div class="col-sm-6 form-group">
            <select id="category" formControlName="category" class="selectric form-control">
                <option>Select Provider Type</option>
                <option value="{{category.id}}" *ngFor="let category of categories">{{category.name['en']}}</option>
            </select>
        </div>
        <div class="col-sm-6 form-group">
            <select id="subcategory" formControlName="subcategory" class="selectric form-control">
                <option>Select Category</option>
            </select>
        </div>
    </div>
    <div class="form-row">
        <div class="col-sm-12 form-group">
            <input class="form-control modify-block-input your-detail-input" placeholder="Business Name">
        </div>
    </div>
    <button class="btn btn-default center-block" type="submit">Submit</button>
</form>

它成功地从 API 调用中获取数据，但是，我需要的是当元素在 DOM 中更新时，我希望调用一个回调函数，这是因为我需要刷新插件。

谢谢。

Answer 1

我使用MutationObserver 解决了它（更多信息在这里检测DOM的变化）

我正在尝试的另一种选择是使用回调进行ngFor