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

Question

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

{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.
  }
}

在模板中进行以下更改-

编辑 1 - 像这样在 mat-option 中使用 z.view [此更改是为了 - 当您需要 "view" zip

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

编辑 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);将return{view: '1010 - Innere Stadt', value: 24}既有值又有视图。而用户将在 Mat-Select 中看到 "view"。 这是实现Mat-Select的标准方式。

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

如果你仍然想要 form.zip.value 到 return "1010 - Innere Stadt" 并且你想要 "value" 那么 "EDIT 1" 是解决方案，然后您将不得不像这样在您的 zip 数组中找到该对象 -

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

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

How do I bind a Display Value of an Angular-Material Select field to ngModel

javascript

angular-ngmodel

angular-material

angular

angular-forms