Arrays 如何以角度分量显示多个对象的数据或如何将它们添加到一个数组中

Arrays 如何以角度分量显示多个对象的数据或如何将它们添加到一个数组中,arrays,angular,typescript,leaflet,turfjs,Arrays,Angular,Typescript,Leaflet,Turfjs,在父组件内forEach循环中,我得到了地图上每一层的坐标,而不是与点击点相交的坐标。使用EventEmitter我将此数据发送到子组件 this.airspaceLayers.forEach((o: any) => { let coord = o.geometry.coordinates[0]; let poly = turf.polygon([coord]); this.map.on('click', <LeafletMouseEvent> (e

在父组件内
forEach
循环中,我得到了地图上每一层的坐标,而不是与点击点相交的坐标。使用
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});
        }
…最后,我将从父组件返回多个对象,如下所示:

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: {…}}
我需要将角度组件html中的所有数据显示为单独的div,我想知道如何正确执行。 我希望foreach中的arr.push()将每个对象添加到一个数组中,但是我得到了两个独立的对象。 最好将其显示为以下内容:

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

{{obj.intersectedLayers.designator}
(等等……)
我正在阅读可以使用keyvalue和
管道显示此数据的内容,但这种方式对我不起作用,它是一个
对象的情况,而不是多个

如何以简单和最佳的方式显示此数据?

这是否有效

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

{{obj.指示符}}
(等等……)

根据Angular的官方文档,您可以使用
@input
属性将数据从父组件传递给子组件(从上到下),而使用事件/事件发射器反之亦然(从下到上)。 不管怎样,我想说的是,如果你已经使用了一个事件发射器,你所要做的就是把它移动到一个更高的服务,并在你想使用的任何地方使用它。 然后,您将能够推入单个对象并从任何地方订阅它

p.S.请确保为此目的使用Singelton服务。
希望这个解释对您有所帮助。

它确实有用,但仅适用于第一个对象,但尝试访问intersectedLayersData[1]时不会显示任何数据。与直接相交图层Data.designator相同。问题是如何为所有数据对象/数组显示它并不重要,一个数组可能更有效。
<div *ngFor="let obj of intersectedLayersData[0]">
    <h3>{{obj.designator}}</h3>
    (etc...)
</div>