0

Возникла проблема при отправке данных с клиента на сервер, использую Angular Material 5.2.4, компонент Selection lists на стороне клиента. По сути, список из чекбоксов с назаниями и id. Таким образом, я не могу отправить на сервер массив из id чекнутых значений, т.к. браузер реагирует на чек только MatListOption, а само value,которое состоит из 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>

component.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);       
    });

Спасибо за помощь!)

Kris_tina
  • 3

1 Answers1

0

Какой результат вы хотите получить? Вы в метод 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);
    }
}
arturovt
  • 4,738