В моем приложении в каждом EditXYComponent значения по умолчанию для ng-select установлены правильно, за исключением одного массива объектов (учетных записей). Ниже приведу пример моего EditExpenseComponent. Я заполняю три ng-select: учетные записи, сущности и типы.
В методе ngOnChanges() я проверяю, присутствуют ли все значения, затем создаю FormGroup
ngOnChanges(): void {
if (this.checkAllValuesPresent() && !this.formReady) {
console.log(this.expense);
console.log(this.accounts);
console.log(this.entities);
console.log(this.types);
this.expenseForm = this.fb.group({
account: [this.expense.account, Validators.required],
debtor: [this.expense.debtor, Validators.required],
amount: [this.expense.amount, Validators.required],
date: [this.expense.date, Validators.required],
type: [this.expense.type, Validators.required],
description: [this.expense.description]
});
this.formReady = true;
}
}
Это соответствующие части html
<form
...
<fieldset>
<div class="form-group row" id="account">
<label class="col-md-3 col-form-label" for="account">Konto *</label>
<div class="col-md-9">
<ng-select
id="accountWrapper"
[items]="accounts"
bindLabel="name"
bindValue="id"
name="account"
formControlName="account"
[searchable]="true"
>
</ng-select>
</div>
</div>
<div class="form-group row" id="debtor">
<label class="col-md-3 col-form-label" for="debtor">Debitor *</label>
<div class="col-md-9">
<ng-select
id="debtorWrapper"
[items]="entities"
bindLabel="name"
bindValue="id"
name="debtor"
formControlName="debtor"
[searchable]="true"
>
</ng-select>
</div>
</div>
...
<div class="form-group row" id="type">
<label class="col-md-3 col-form-label" for="type">Kategorie *</label>
<div class="col-md-9">
<ng-select
id="typeWrapper"
[items]="types"
bindLabel="name"
bindValue="id"
name="type"
formControlName="type"
[searchable]="true"
>
</ng-select>
</div>
</div>
...
</form>
Журналы консоли выше регистрируют следующее:
// this.expense
{
"id": "454",
"debtor": "147",
"account": "22",
"amount": "54.00",
"date": "2020-03-15",
"type": "144",
"description": "fdsafasd",
"user_id": "5e6e6050e965e80c8b4c382c"
}
// this.accounts
[
{
"id": 22,
"name": "Hauptkonto",
"initial_saldo": 1000,
"creation": "2020-03-14T23:00:00.000Z",
"belongs_to": "5e6e6050e965e80c8b4c382c",
"saldo": 946
},
{
"id": 23,
"name": "Sparkonto",
"initial_saldo": 2000,
"creation": "2020-03-14T23:00:00.000Z",
"belongs_to": "5e6e6050e965e80c8b4c382c",
"saldo": 2300
}
]
// this.entities
[
{
"id": "147",
"name": "dfasfdasfdds",
"address": null,
"city": null,
"iban": null,
"user": "5e6e6050e965e80c8b4c382c"
},
{
"id": "146",
"name": "fdasfdas",
"address": "",
"city": "",
"iban": "",
"user": "5e6e6050e965e80c8b4c382c"
}
]
// this.types
[
{
"id": "144",
"name": "aa",
"user": "5e6e6050e965e80c8b4c382c"
},
{
"id": "142",
"name": "aaaaaaa",
"user": "5e6e6050e965e80c8b4c382c"
}
...
]
В результате следующее:
Как видите, все значения присутствуют, все ng-select построены одинаково. Так как это может быть, что ng-select не заполняется. Это происходит с каждым компонентом редактирования во всем приложении, если есть массив с учетными записями для заполнения.