无法将mat-autocomplete值绑定到我的输入类型文本

时间:2019-07-26 14:56:20

标签: angular angular-material

我正在尝试设计一个具有很多类型为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;
  })
}

}

0 个答案:

没有答案