Question

我写了一个代码来显示产品列表，它具有选择产品的功能（使用复选框）。保存后，我需要知道他们选择了什么产品。请帮忙。

代码

import {Component, OnInit, Inject} from '@angular/core';
import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material';

@Component({
    selector: 'app-work-order-status',
    templateUrl: 'work-order-status.component.html',
    styleUrls: ['work-order-status.component.scss']
})

export class WorkOrderStatusComponent implements OnInit {
    statuslist: string[] = ['InRepair', 'Hold', 'Closed', 'Built', 'Shipped', 'WIP'];
    worderobj: any;
    constructor(public dialogRef: MatDialogRef<WorkOrderStatusComponent>,
        @Inject(MAT_DIALOG_DATA) public data: any) {
            this.worderobj = [data];
    }

    ngOnInit() {
    }

    public onClose(): void {
        this.dialogRef.close();
    }

    public onSave() {
    }
}

work-order-status.component.html

<mat-selection-list #status>
    <mat-list-option *ngFor="let list of statuslist">
        {{list}}
    </mat-list-option>
</mat-selection-list>
<div fxLayout="row" fxLayoutGap="8px" fxLayoutAlign="end end">
    Options selected: {{status.selectedOptions.selected.length}}
</div>

<div fxLayoutGap="8px">
    <button mat-raised-button color="accent" (click)="onSave()">Change</button>
</div>

Answer 1

首先将值输入属性添加到mat-list-option组件并绑定列表值

component.html

<mat-selection-list #status>
    <mat-list-option [value]="list" *ngFor="let list of statuslist">
        {{list}}
    </mat-list-option>
</mat-selection-list>

然后将模板引用变量传递给onsave方法

<div fxLayoutGap="8px">
    <button mat-raised-button color="accent" (click)="onSave(status)">Change</button>
</div>

component.ts

然后像这样访问选定的值

onSave(status){
    const value = status.selectedOptions.selected.map(sel=>sel.value);
    console.log(value);
  }

Example

如何在角度验证垫选择列表？

1 个答案: