У меня есть элемент <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. Я хочу, чтобы была вызвана функция обратного вызова, потому что мне нужно обновить плагин.
Спасибо.