从 firebase 数据库存储数组

Question

我正在尝试使用 Angular 和 angularfire 构建一个项目。我的项目是关于使用传单地图绘制多边形，然后将多边形的坐标推送到数据库。我已成功将数组推送到数据库，但是从数据库中检索坐标时出现问题。

数据库结构：

{
  "Locations" : {
    "-M0M9kqEbE0FVMzIZAg0" : {
      "text" : [ [ {
        "lat" : 35.97800618085566,
        "lng" : 42.03369140625001
      }, {
        "lat" : 33.88865750124075,
        "lng" : 41.46240234375001
      } ] ]
    }
  }
}

我正在尝试将上面的数组存储在 ts 类而不是 html 中。

我的代码：

    export class WeatherNowComponent {

      itemsRef: AngularFireList<any>;
      items: Observable<any[]>;

      coords :any
      constructor(private db: AngularFireDatabase) {

        this.itemsRef = this.db.list('Locations')
        // Use snapshotChanges().map() to store the key
        this.items = this.itemsRef.snapshotChanges().pipe(
          map(changes => 
            changes.map(c => ({ key: c.payload.key, ...c.payload.val() }))
          )
        );


        this.db.list('Locations').snapshotChanges().subscribe((markers: any) => {

          console.log(markers)
          markers.forEach(singlemarker => {
            console.log(singlemarker)

   // ADD COORDS to MAP POLYGON
    var polygon = L.polygon([singlemarker.text.lat,singlemarker.text.lng], {color: 'red'}).addTo(this.map);
          });
        });

        console.log(this.items)
      }



    }

所以我在控制台日志中只有键数组，没有其他数组对象。

Answer 1

如果您因为它是一个数组而故意调用扩展运算符，请尝试将其分配给对象字面量定义中的属性值。

{ key: c.payload.key, values: ...c.payload.val() }

编辑：根据您的评论，我仍然会说仍然只是将坐标数组（lat/lng 属性对对象）分配给 values 属性以便稍后迭代。我假设 .val() 方法必须返回这些值的数组。否则请发布 .val() 返回的内容。

另外，我注意到您应该检查的其他内容。

observable 正在调用 RxJs pipe() 方法进行映射，但我没有注意到任何地方的 subscribe()。而 .pipe() 允许您映射和过滤回调需要订阅。

编辑#2：基于您在下面的第二条评论。你要什么我还不清楚。所以我会根据评论再给出两个可能的答案：“好的，我的问题是如何直接获取数组？”

// Possibility #1
// Simplest is to store off the returned data into the coords variable for later processing.
// You can then get the array directly at any later point just by accessing the coords

this.db.list('Locations').snapshotChanges().subscribe((markers: any) => {
    coords = markers;
});

// Possibility #2
// Since the data structure you are using works like a dictionary data structure
// Define some structures to store off the data and get at the array data directly later

// Define this somewhere outside your class
interface ICoordinate {
    lat: string;
    lng: string;
}

// Initialize coordinate dictionary
let coordinates: { [key: string] : ICoordinate[]; } = {};


// Retrieve locations and store off coordinates to get at the array data directly
this.db.list('Locations')
    .snapshotChanges()
    .subscribe((markers: any) => {
        coordinates[markers.key] = ICoordinate[];

        markers.forEach(singlemarker => {
           coordinates[markers.key].push({ lat: singlemarker.text.lat, lng: singlemarker.text.lng });
        });
    });

编辑#3：哦，是的，我明白了。该数组需要在添加之前进行初始化。

更新的代码。此外，作为对您未来问题的额外帮助，如果您有一个 sn-p，这将非常有帮助。所以。问题参考：I've been told to create a "runnable" example with "Stack Snippets", how do I do that?

希望对您有所帮助。

编码愉快！