角度材质双向绑定选择返回未定义

Question

由于某些原因，类别返回未定义。

组件

<form [formGroup]="searchForm" class="login-form d-flex flex-column m-auto">
<mat-form-field appearance="outline">
<mat-label>Category</mat-label>
<mat-select placeholder="Product type" formControlName="category" (valueChange)="search()" >
<mat-option *ngFor="let cate of this.categories" [value]="cate">{{ cate }}</mat-option>
</mat-select>
</mat-form-field>
</form>

和组件TypeScript

import { Component } from '@angular/core';
import { Products } from "../../Products";
import { ProductService } from "../../services/product.service";
import {ShoppingCartService} from "../../services/shopping-cart.service";
import {BreakpointObserver, Breakpoints} from "@angular/cdk/layout";
import {FormBuilder, FormControl, FormGroup} from "@angular/forms";
@Component({
selector: 'app-products',
templateUrl: './products.component.html',
styleUrls: ['./products.component.css']
})
export class ProductsComponent {
searchForm: FormGroup;
category: string;
categories: string[] = ['CPU', 'GPU', 'HDD'];
searchForm: FormGroup;
constructor() {}
search(): void {
console.log(this.category); // undefined
}
}

我尝试了许多其他方式绑定它，但不再是我所做的，它总是返回未定义的

Answer 1

您缺少了一些东西，让我们一步一步来。由于您使用的是Reactive Forms，我建议您不要直接使用双向绑定，即[(ngModel)]，而是使用Reactive Form提供的功能。

您创建了searchFrom: FromGroup，但它没有初始化，所以首先我们必须初始化它，我将使用Angular的FormBuilder Service来实现这一点，我们还需要在HTML表单组中使用的searchForm中添加formControl

constructor(private fb: FormBuilder) {} 
ngOnInit(): void {
this.searchForm = this.fb.group({
category: [{ value: '', disabled: false }],
});
}

现在有两种方法可以从mat-select中获取类别。您可以使用FormControl.valueChanges方法，也可以使用mat-select的(selectionChange)方法

第一种方法如下(推荐(：

首先，我们创建一个订阅valueChanges属性的方法。

subscribeToCategoryValueChanges(): void {
this.searchForm.controls.category.valueChanges.subscribe(resp => {
console.log(resp);
}); 
}

然后我们将简单地在ngOnInit()中调用该函数

ngOnInit(): void {
this.searchForm = this.fb.group({
category: [{ value: '', disabled: false }],
});
this.subscribeToCategoryValueChanges();
}

此外，我们将不得不从HTML中删除search()函数，因为它不再需要

<form [formGroup]="searchForm" class="login-form d-flex flex-column m-auto">
<mat-form-field appearance="outline">
<mat-label>Category</mat-label>
<mat-select placeholder="Product type" formControlName="category">
<mat-option *ngFor="let cate of categories" [value]="cate">{{ 
cate }}</mat-option>
</mat-select>
</mat-form-field>
</form>

第二种方法如下：

search(): void {
console.log(this.searchForm.controls.category.value);
}

您还必须更新HTML并用(selectionChange)替换(valueChange)

<form [formGroup]="searchForm" class="login-form d-flex flex-column m-auto">
<mat-form-field appearance="outline">
<mat-label>Category</mat-label>
<mat-select placeholder="Product type" formControlName="category" 
(selectionChange)="search()" >
<mat-option *ngFor="let cate of categories" [value]="cate">{{ 
cate }}</mat-option>
</mat-select>
</mat-form-field>
</form>