Buen dia, tengo un problema con un elemento mat-autocomplete que lo creo dinamicamente con angular material, y este es el codigo de la vista:
<button type="button" class="btn btn-dark" (click)="crearDotacion()">Crear Dotación</button>
<div *ngFor="let dot of crearMateriales; let i = index">
<mat-form-field fxFlex="25">
<input matInput placeholder="Material" aria-label="Material" [matAutocomplete]="auto" [formControl]="miControl" [(ngModel)]="dot.selectMaterial" >
<mat-autocomplete #auto="matAutocomplete">
<mat-option *ngFor="let material of materiales | async" (click)='changeMaterial2(material,i)' [value]="material.v_nombre_material">
<span>{{ material.v_nombre_material }}</span>
</mat-option>
</mat-autocomplete>
</mat-form-field>
<div>
El codigo del .ts:
newServicio(){
const property = {
'selectMaterial': null,
'tallas': null,
'selectTalla': null,
'cantidad': null,
'stock': null,
'stock_statico': null,
'selectTipo': null,
'selectObs': null,
'longitudTallas': 0,
'_status': true
};
if ( this.crearMateriales.length < 10){
this.crearMateriales.push(property);
}
}
crearDotacion(){
this.newServicio();
}
Me lanza el siguiente error al crear un nuevo nodo:
ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: 'model: BOTINES CALERO 37 '. Current value: 'model: null'.
Al mismo tiempo se borra lo del input buscado.