Question

我正在使用Angular材质并使用Mat-Select。当用户做出选择时，我想抓住一个实际上是具有Id和description属性的对象的用户。

<mat-form-field>
    <mat-select placeholder="Select User Type"  (selectionChange)="selectUserType(user)">
        <mat-option  *ngFor="let user of userTypeList" [value]="user.description">
            {{ user.description }}
        </mat-option>
    </mat-select>
</mat-form-field>

当用户做出选择时，我在这里收到未定义：

public selectUserType(userType: OxygenUserType) {
    console.log('selected');
    this.selectedUserType = userType;
    console.log(this.selectedUserType);
}

我也试过(selectionChange)="selectUserType($event.value)"，但这不会产生任何对象。我需要用户选择是一个如下所示的对象：

{id:1, description:Agent},
{id:2, description:Dealer}

此对象基于此界面

export interface OxygenUserType {
    id: number;
    description: string;
}

Answer 1

您可以使用[(value)]设置所选用户。在选项的值中指定用户对象而不是仅描述：

<mat-select placeholder="Select User Type" [(value)]="selectedUserType" (selectionChange)="onUserTypeChange()">
    <mat-option  *ngFor="let user of userTypeList" [value]="user">
        {{ user.description }}
    </mat-option>
</mat-select>


public onUserTypeChange() {
    console.log(this.selectedUserType);
}

Answer 2

我认为你的方式不起作用，因为你用mat-option声明你的用户，所以mat-select并不知道这一点。

我会通过使用模型解决这个问题，因此您不需要一个函数来存储您的价值。如果您想在模型更改时仍然执行其他操作，则可以在更改功能中从模型中调用您的值。

所以你的HTML会是：

  public selectUserType() {
    console.log('selected');
    console.log(this.selectedUserType);
    // do some stuff with your value.
  }

并在您的方法中：

{{1}}

Mat-Select返回undefined

2 个答案: