我正在尝试设计一个具有很多类型为text的输入字段的表。
我有一个mat-autocomplete,可根据行信息获取数据。
由于某些原因,当我单击由垫自动完成生成的选项时,输入值不会更新。
这是我的HTML
<ng-container *ngFor="let set of sets; let i = index" [matColumnDef]="set.name">
<th mat-header-cell
*matHeaderCellDef
(mouseenter)="setPosition(i)">
<div >
<h4>{{set.name | titlecase}} <span style="cursor: pointer" (click)="editSet(set)" class="pull-right glyphicon glyphicon-pencil"></span></h4>
</div>
<div>
<span cdkDropList
[cdkDropListData]="type"
(cdkDropListDropped)="addType($event, i)" *ngFor="let type of set.types; let isLast=last" cdkDrag>{{types.number}}{{isLast ? '' : ', '}}</span>
</div>
</th>
<td mat-cell *matCellDef="let row">
<input id="uniqueId" *ngIf="condition"
placeholder="Enter Details"
ngModel
(ngModelChange)="getNumbersOfRowId(row.id, $event)"
[ngModelOptions]="{standalone: true}"
[(ngModel)]="this.set.types[findIndex(set.types, row.id)].number"
[matAutocomplete]="auto"
(focusout)="saveNumber(sets[i], row)"
type="text">
<input id="empty"
placeholder="Disabled, drag number to enable"
*ngIf="this.set.types.length === 0"
[disabled]="this.set.types.length === 0"
type="text" >
<mat-autocomplete #auto="matAutocomplete">
<mat-option *ngFor="let number of filteredNumbers" [value]="number">
{{number}}
</mat-option>
</mat-autocomplete>
</td>
</ng-container>
类型脚本
getNumbersOfRowId(id: number, event: any) {
if( this.rowId!== id) {
this.rowId= id;
this.numbers= [];
this.filteredNumbers= [];
this.service.getNumberFormRowId(id, event)
.subscribe(res => {
this.numbers = res;
this.filteredNumbers = res;
})
}
}