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

我有一个 <select>

这是我的类型脚本文件。

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中的元素更新时,我希望调用回调函数,这是因为我需要刷新插件。