Как проверить список выбора матов в угловых? - PullRequest
0 голосов
/ 25 сентября 2019

Я написал код, чтобы показать список продуктов, и у него есть возможность выбрать продукты (используя флажок).Когда я сохраняю его, мне нужно знать, какие продукты они выбрали.Пожалуйста, помогите.

Код

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>

1 Ответ

1 голос
/ 25 сентября 2019

Свойство ввода значения первого места в компоненте 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);
  }

Пример

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...