У меня проблема с потоком данных между родительским и дочерним компонентами. У меня есть список объектов, каждый из которых можно редактировать в модальном. Все издания работают нормально, кроме одного - перечислений. Здесь приведены соответствующие фрагменты кода.
Родитель (Cost-list.component.ts)
<ng-container *ngFor="let ex of expenses$">
<tr (click)="selected = ex">
<th scope="row">{{ ex.id }}</th>
<td>{{ ex.paymentDate }}</td>
<td>{{ ex.expenseType['description']}}</td>
{{ex.expenseType}}
<td>{{ ex.value }}</td>
<td>{{ex.description}}</td>
<td>
<button type="button" class="btn btn-info"
data-toggle="modal" data-target="#expenseModalEdit">Edit
</button>
<button type="button" class="btn btn-danger"
data-toggle="modal" data-target="#expenseModalDelete">Delete
</button>
</td>
</tr>
</ng-container>
Родитель HTML (Расход-list.component. html)
export class ExpenseListComponent implements OnInit {
keys: any[];
types = ExpenseType;
selected: Expense;
expenses$: Expense[];
@ViewChild('editModal', {static:false}) expenseModal: ExpenseEditModalComponent;
constructor(
private route: ActivatedRoute,
private service: ExpenseService) {
this.keys = Object.keys(this.types).filter(String);
}
ngOnInit() {
this.service.findAll()
.subscribe(data => {
this.expenses$ = data;
},
err => console.error(err),
() => console.log('done loading expenses'));
}
Ребенок (расход-edit-modal.component.ts)
<form #exForm="ngForm" class="justify-content-center">
<div class="form-group">
<label for="expenseType">Type</label>
<select id="expenseType" class="form-control" name="type" [(ngModel)]="expense.expenseType" #type="ngModel">
<option selected>{{expense.expenseType["description"]}}</option>
<option *ngFor="let exType of keys(types)" [value]="exType">{{types[exType]}}</option>
</select>
</div>
Ребенок HTML (расход-edit-modal.component. html)
export class ExpenseEditModalComponent {
@ViewChild('exForm', {static: false}) exForm : NgForm;
@Input() expense: Expense;
closeResult: string;
keyCount: number = 0;
//* keys: any[];
//* mapping of expense type enum
keys = Object.keys;
types = ExpenseType;
//*
constructor(private modalService: NgbModal, private service: ExpenseService) {
//*this.keys = Object.keys(this.types).filter(String);
}
Теперь, когда я изменяю значение costType в динамическом режиме c, предыдущее значение из списка расходов исчезает и появляется после обновления sh страницы (из-за тела функции onInit). У кого-нибудь есть идеи, как с этим бороться? Я изо всех сил старался, но не нашел ответов. Эти перечисления в TS для меня несколько хитры ...