主页 / 问题 / 868005
Accepted
Kris_tina
Asked:2020-08-13 17:08:29 +0000 UTC2020-08-13 17:08:29 +0000 UTC

获取存储在值 mat-list-option 中的值，角度材料 5

  • 772

使用 Angular Material 5.2.4（客户端的选择列表组件）从客户端向服务器发送数据时出现问题。事实上，一个带有名称和 id 的复选框列表。因此，我无法将检查的 id 值数组发送到服务器，因为 浏览器仅对检查 MatListOption 做出反应，而由 id 组成的值本身，我无法从中获取。
这是component.html程序代码

<mat-selection-list 
(selectionChange)="onSelection($event.source.selectedOptions.selected)" >
<mat-list-option *ngFor="let car of cars" [value]="car.id" 
checkboxPosition="before" >
{{car.description}}
</mat-list-option>
</mat-selection-list>

组件.ts

 import { Component, OnInit } from '@angular/core';
 import { ListService } from '../list.service';

@Component({
  selector: 'app-list-measu',
  templateUrl: './list-measu.component.html',
  styleUrls: ['./list-measu.component.css']
})
export class ListMeasuComponent implements OnInit {
    cars: Array<any>;
    current_selected: string;
    id: Array<any> = new Array<any>();


  constructor(private listService: ListService) { }

  ngOnInit() {
      this.listService.getAllmeasures().subscribe(data => {
      this.cars = data;
    });
  }

  onSelection(e){
    console.log(e);       
    });

谢谢您的帮助！）

angular5

1 个回答

  1. Best Answer

    你想得到什么结果？您onSelection将它传递给方法$event.source.selectedOptions.selected- 它始终是一个实例数组MatListOption。onSelection重写方法如下：

    import { MatListOption } from '@angular/material';

@Component({ ... })
export class ... {
    public onSelection(selected: MatListOption[]): void {}
}

    由于该方法不将参数作为参数Event，而是将数组作为参数，此外，您将清楚地知道您正在使用什么类型。此外value，您可以通过索引引用某些实例和属性来获取value。

    比方说：

    public cars = [{
    id: 1,
    description: 'Mercedes'
}, {
    id: 2,
    description: 'BMW'
}];

public onSelection(selected: MatListOption[]): void {
    if (selected.length === 0) {
        return;
    }

    console.log(selected[0].value);
}

    如果您需要向服务器发送标识符数组，则创建一个方法（submit例如）：

    @Component({ ... })
export class ... {
    public cars = [];

    private selected: MatListOption[] = [];

    public onSelection(selected: MatListOption[]): void {
        this.selected = selected;
    }

    public submit(): void {
        const body: number[] = this.selected.reduce((accumulator, item) => {
            accumulator.push(item.value);

            return accumulator;
        }, []);

        someService.makeApiCall(body);
    }
}
    • 0

相关问题