我對 Angular 開發(fā)場景還很陌生,并從一個簡單的出租車預(yù)訂表開始。我附加了一個帶有 Array 的 Material-Select 字段,該 Array 具有 2 個屬性,如下所示:{value: 24, view: '1010 - Vienna'}效果很好,但是當(dāng)我提交表單并檢查 console.log 字段 zip 等于 24 時。如何實現(xiàn),ngModel 綁定到我的下拉列表的 view 屬性?非常感謝你!預(yù)期行為:當(dāng)我通過 onSubmit() 提交表單時,表單對象的屬性 zip 應(yīng)輸出“1010 - Innere Stadt”而不是 24我想將它包含在 ngForm 創(chuàng)建的 Form 對象中,然后我可以直接將它發(fā)送到我的 Express API 以將其存儲在數(shù)據(jù)庫中。下面附上圖片應(yīng)用程序組件.html<form (ngSubmit)="onSubmit(form)" #form="ngForm"><mat-select placeholder="Postleitzahl" [(ngModel)]="zipValue" name="zip"> <mat-option *ngFor="let z of zip" [value]="z.value" >{{z.view}} </mat-option> </mat-select> <button type="submit">submit</button></form>app.component.tsimport { Component, OnInit, OnChanges } from '@angular/core';import { NgForm } from '@angular/forms';@Component({ selector: 'app-form-de', templateUrl: './form-de.component.html', styleUrls: ['./form-de.component.css']})export class FormDeComponent {zip = [ { view: '1010 - Innere Stadt', value: 24 }, { view: '1020 - Leopoldstadt', value: 25 },] onSubmit(form: NgForm) { console.log(form.value); }}
如何將 Angular-Material Select 字段的顯示值綁定到 ngModel
紅糖糍粑
2021-06-15 17:22:10