Передача набора в дочерний компонент в Angular - PullRequest
Новая
       28

Передача набора в дочерний компонент в Angular

0 голосов
/ 14 мая 2019

У меня есть список флажков, которые обозначены id: number ( Gist для данных как JSON ).Если я установлю первый флажок, то значение id будет сохранено в Set.

Мой ParentComponent выглядит следующим образом:

parent.component.ts фрагмент кода 

import { Component, OnInit } from '@angular/core';
import * as FilterFunc from 'src/assets/FilterFunction.json';

const Filters: any = FilterFunc;

@Component({
  selector: 'parent',
  templateUrl: './parent.component.html',
  styleUrls: ['./parent.component.css']
})
export class ParentComponent implements OnInit {
  filters = Filters.default;
  selections = new Set();

  constructor() {
  }
  ngOnInit(): void {
  }
  changeCheck(id: number, event: any) {
    (event.target.checked) ?
      this.selections.add(id):
      this.selections.delete(id);

  }
}

parent.component.html фрагмент кода: 

<!--- ....>
<div *ngFor="let label of filter['labels']">
          <div class="form-check">
            <input class="form-check-input"
                   type="checkbox"
                   value="{{label['id']}}"
                   id="{{label['id']}}"
                   [(ngModel)]="label['checked']"
                   (change)="changeCheck(label['id'], $event)"
            >
              <label class="form-check-label" for="{{label['id']}}">
                {{label['name']}}
              </label>
          </div>
      </div>

Я хочу передать это selections: Set дочернему компоненту, и в HTML-компоненте Родителя я добавил следующее: 

<child [selected]=selections></child>

в ChildComponent :

child.component.ts

import { Component, OnInit, Input} from '@angular/core';
@Component({
  selector: 'child',
  templateUrl: './child.component.html',
  styleUrls: ['./child.component.css'],
  providers: [
    // service that I need
  ]
})
export class ChildComponent implements OnInit {


  @Input()selected: any; // not sure if `Set` is a type for a variable in TS

  constructor(private service: ExploreService) { }

  ngOnInit() {      }

   someFunct() {
      // Use the incoming `selected` here.
   }

}

child.component.html

   {{ selected | json }}

Но он дает мне только {} в браузере всякий раз, когда я отмечаю флажок и в соответствии с changeCheck selections должен был добавить значения в Set

Если я использую {{selected}}, он продолжает предоставлять мне [object Set].Как передать Set от родительского к дочернему компоненту?

После использования директивы OnChange в дочернем компоненте я делаю следующее: 

ngOnChanges(change: SimpleChange) {
console.log(change.currentValue);
}

Это дает мне набор () но selected по-прежнему пустой набор в консоли браузера.

1 Ответ

0 голосов
/ 15 мая 2019

Единственный возможный способ отправки дочернему элементу - преобразовать Set в массив и затем передать его по дочернему компоненту

. Мне пришлось создать закрытый элемент как Set,и должен был преобразовать его в Array

private _selections = new Set();
selections: number[] = [];

в функции changeCheck(id: number, event: any) в конце проверки события 

(event.target.checked) ? this._selection.add(id) : this._selection.delete(id);
this.selections = Array.from(this._selections);

Наконец, он будет работать с OnChanges hookкогда каждый раз родитель передает значение идентификатора.

...