[英]mat-select mat-option angular drop down doesn't change value after you select other value from dropdown
I am using Angular material table, mat-select and mat-option drop down, For the Media dropdown, the value was Email, lk_type was 3287, after I select phone, the media value should be phone and lk_type should be 3286, however,当我单击编辑按钮时,this.currentData 没有更改下拉值,它仍然保持旧值,你知道我如何更改这个 angular mat-select 和 mat-option 下拉列表的下拉值吗?
add-person.component.html
<mat-table [dataSource]="dataSource">
<ng-container matColumnDef="person_contact_ID">
<mat-header-cell *matHeaderCellDef> Person Contact ID </mat-header-cell>
<mat-cell *matCellDef="let row">
<mat-form-field floatLabel="{{ row.editing ? 'float' : 'never'}}">
<input [(ngModel)]="row.currentData.person_contact_ID" placeholder="Person Contact ID" [disabled]="!row.editing" matInput>
</mat-form-field>
</mat-cell>
</ng-container>
<ng-container matColumnDef="media">
<mat-header-cell *matHeaderCellDef> Media </mat-header-cell>
<mat-cell *matCellDef="let row">
<mat-form-field>
<mat-select style="min-width: 200px;" placeholder="" value="{{row.currentData.lk_type}}">
<mat-option *ngFor="let media of mediaList " value="{{media.lookup_id}}">
{{ media.descr }}
</mat-option>
</mat-select>
</mat-form-field>
</mat-cell>
</ng-container>
<ng-container matColumnDef="actionsColumn">
<mat-cell *matCellDef="let row">
<button *ngIf="row.editing" mat-icon-button color="primary" focusable="false" (click)="row.confirmEditCreate_AddPerson()">
<i class="fa fa-check mat-icon"></i>
</button>
</mat-cell>
</ng-container>
<mat-header-row *matHeaderRowDef="displayedColumn
s"></mat-header-row>
<mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>
</mat-table>
表数据.ts
confirmEditCreate_AddPerson(): boolean {
//_personService: TestRDB2Service;
if (this.id == -1)
return this.source.confirmCreate(this);
else
try {
this._http.put("https://localhost:5001/" + 'api/TestRDB2/AddUpdatePerson_Contact/', this.currentData).subscribe();
} catch (e) {
return e
}
return true;
//return this.source.confirmEdit(this);
}
如果您在 mat-table 中使用 mat-select,则需要使用双向绑定ngModel才能在 currentData object 中设置数据,请查看以下代码以供参考:
<mat-form-field>
<mat-select style="min-width: 200px;" placeholder="" [(ngModel)]="row.currentData.lk_type">
<mat-option *ngFor="let media of mediaList " value="{{media.lookup_id}}">
{{ media.descr }}
</mat-option>
</mat-select>
</mat-form-field>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.