Angularfire AGM实时显示多标记问题及Angular入门教程推荐

嘿，我来帮你解决AGM地图多标记显示的问题，顺便给你推荐适合编程新手的Angular学习教程～

一、修复多标记显示的代码修改 #

你现在只能显示单个标记，是因为代码里用db.object()只获取了单个位置节点（/raw-locations/8290/0），要显示多个标记，得改成获取整个位置列表，再循环渲染每个标记。

1. 修改App Component代码 #

把原来获取单个对象的代码，改成获取数据列表：

import { Component } from '@angular/core';
import { AngularFireDatabase } from '@angular/fire/compat/database';
import { Observable } from 'rxjs';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  // 把单个data改成locations列表的Observable
  locations: Observable<any[]>;

  constructor(public db: AngularFireDatabase) {
    // 这里获取/raw-locations/8290下的所有子节点（也就是所有位置数据）
    this.locations = db.list('/raw-locations/8290').valueChanges();
  }
}

2. 修改App HTML代码 #

用*ngFor循环遍历locations列表，为每个位置生成一个agm-marker：

<agm-map [latitude]="31.5718289" [longitude]="74.3690473">
  <!-- 用*ngFor循环渲染所有标记，async管道处理Observable -->
  <agm-marker 
    *ngFor="let location of locations | async"
    [latitude]="location.lat"
    [longitude]="location.lng"
    [label]="location.label || 'Stickcar'" <!-- 可以用数据里的label，或者默认值 -->
  ></agm-marker>
</agm-map>

代码说明：

• db.list()会获取指定路径下的所有子数据，返回一个包含多个位置对象的Observable数组
• *ngFor="let location of locations | async"：async管道自动订阅Observable，把数组数据取出来，然后循环每个location生成标记
• 如果你的每个位置数据里有自定义label，就用location.label，没有的话就用默认的'Stickcar'

二、适合新手的Angular学习教程推荐 #

作为刚入门的编程新手，推荐这些教程帮你系统学习Angular：

• Angular官方入门教程：这是最权威的学习资源，从搭建第一个Angular项目开始，一步步讲解组件、服务、路由、数据绑定这些核心概念，跟着做就能快速上手基础。
• Angular University新手课程：内容非常通俗易懂，有很多小实战案例，能帮你把理论知识转化为实际代码，适合入门后巩固基础。
• Udemy《Angular - The Complete Guide》：虽然是付费课程，但内容覆盖从基础到高级的所有知识点，还有多个完整项目练习，适合想要系统深入学习的新手。
• YouTube Angular Crash Course系列：免费的视频教程，节奏快，能让你在短时间内掌握Angular的核心功能，适合时间有限、想快速上手的同学。

内容的提问来源于stack exchange，提问作者Farooq Ahmed