如何将 Angular-Material Select 字段的显示值绑定到 ngModel

Question

我是 Angular 开发领域的新手，我从一个简单的出租车预订表开始。我附加了一个带有 2 个属性的数组的 Material-Select 字段：

{value: 24, view: '1010 - Vienna'}

效果很好，但是当我提交表单并检查 console.log 字段 zip 等于 24 时。我怎样才能实现，ngModel 绑定到我的下拉列表的视图属性？

非常感谢！

预期行为：

• 当我通过 onSubmit() 提交表单时，表单对象的属性 zip 应该输出“1010 - Innere Stadt”而不是 24

我想将它包含在 ngForm 创建的 Form 对象中，然后我可以直接将其发送到我的 Express API 以将其存储在数据库中。下面附上图片

Image to Form Object

app.component.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.ts

import { 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);
  }
}

Answer 1

在组件中进行以下更改 - 有一个变量zipValue。将它的初始值设置为你们中的一个 zip 数组值 [未定义也可以] -

export class FormDeComponent {

zipValue;

zip = [
    { view: '1010 - Innere Stadt', value: 24 },
    { view: '1020 - Leopoldstadt', value: 25 },
]

ngOnItit() {

}

 onSubmit(form: NgForm) {
    console.log(form.value.zip);
    console.log(this.zipValue);//you should see mat-select selected value; which would be an object.
  }
}

在模板中进行以下更改-

EDIT 1 - 像这样在 mat-option 中使用 z.view [此更改适用于 - 当您需要 "view" in zip 时

<mat-option *ngFor="let z of zip" [value]="z.view" >{{z.view}} 
    </mat-option>

EDIT 2 - 像这样在 mat-option 中使用 z [此更改适用于 - 当您在 zip 中同时需要 view and value 时；这与我的第一个解决方案相同]

<mat-option *ngFor="let z of zip" [value]="z" >{{z.view}} 
    </mat-option>

在"Edit 2"中点击按钮，console.log(form.value.zip); 将返回{view: '1010 - Innere Stadt', value: 24}，它既有值又有视图。而用户将在 Mat-Select 中看到 "view"。 这是实现 Mat-Select 的标准方式。

请参阅以下堆栈闪电战 - https://stackblitz.com/edit/angular-cvjpxq?file=app/select-overview-example.ts

如果您仍然希望 form.zip.value 返回 "1010 - Innere Stadt" 并且您希望 "value" 然后 "EDIT 1" 是解决方案，那么您将不得不在您的 zip 数组中找到该对象，例如这-

const foundZip = this.zip.find(z => z.view === form.value.zip)