Как отобразить данные нескольких объектов в компоненте angular или как добавить их в один массив

Question

В родительском компоненте внутри forEach l oop Я получаю координаты каждого слоя на карте, а затем получаю те, которые пересекаются с точкой щелчка. Используя EventEmitter Я отправляю эти данные дочернему компоненту.

this.airspaceLayers.forEach((o: any) => {

    let coord = o.geometry.coordinates[0];
    let poly = turf.polygon([coord]);

    this.map.on('click', <LeafletMouseEvent> (e) => {

        let lat = e.latlng.lat;
        let lng = e.latlng.lng;
        let pt = turf.point([lng,lat])
        let isInside = turf.inside(pt, poly);

        if (isInside) {
                layerObjData.push(o);
                this.intersectedLayers.emit({layerObjData});
        }

В дочернем компоненте я получаю данные следующим образом:

if (this.intersectedLayers && this.selectedRowIndex) {
    this.intersectedLayers.subscribe(data => {
        //console.log('check-how-many-iterations');
        //console.log("data",data);
        let arr: any[]  = [];

        Object.keys(data).forEach(function(item) {
            arr.push(data[item]);
        });

        this.intersectedLayersData = arr;
        //console.log("intersectedLayersData",this.intersectedLayersData);

... и, наконец, я возвращаю несколько объектов из родительского компонента следующим образом:

intersectedLayersData [Array(1)]
    0: Array(1)
        0: {type: "TRA", designator: "EPTR94", availabilities: Array(1), info: Array(2), geometry: {…}}

intersectedLayersData [Array(1)]
    0: Array(1)
        0: {type: "TRA", designator: "EPTR129A", availabilities: Array(1), info: Array(2), geometry: {…}}

Мне нужно отобразить данные всех данных в angular компоненте html в виде отдельных элементов div, и мне интересно как это сделать правильно. Я надеялся, что arr.pu sh () внутри foreach добавит каждый объект в один массив, но вместо этого у меня есть два отдельных объекта. Было бы неплохо показать что-то вроде:

<div *ngFor="let obj of intersectedLayers">
    <h3>{{obj.intersectedLayers.designator}}</h3>
    (etc...)
</div>

Я читал, что можно отобразить эти данные, используя keyvalue и Pipes, но у меня это не сработало, это были случаи с одним object, а не с несколькими.

Как отобразить эти данные простым и оптимальным способом?

Answer 1

Согласно официальным документам Angular, вы используете свойства @input для передачи данных от родительского компонента дочерним элементам (сверху вниз), в то время как вы используете события / источники событий наоборот (снизу вверх). В любом случае, я говорю, что если вы уже использовали источник событий, все, что вам нужно сделать, - это перевести его на более высокий сервис и использовать его везде, где вы хотите. тогда вы сможете скопировать sh в один объект и подписаться на него из любого места.

PS убедитесь, что вы используете для этой цели службу Singelton. Надеюсь, вы найдете это объяснение полезным.

Answer 2

Это работает?:

<div *ngFor="let obj of intersectedLayersData[0]">
    <h3>{{obj.designator}}</h3>
    (etc...)
</div>