无法将值从服务传递到组件

Question

我正在学习使用 Angular。
我已经使用 Spring-boot 完成了一些 API，并且在 Angular 中创建了一些组件来查看它们，但我无法查看任何内容。

我已经在 Angular 中创建了一个服务来执行所有 API 调用。
在服务中，我创建了一个任何类型的数组并将其设置为空

  luoghi : any[] = [];

然后我执行 GET 请求，并在方法中将响应值分配给数组：

getAllLuoghi(){
    this.http.get("http://localhost:9595/oota-reg/api/luoghi/all").subscribe({
      next : (response : any) =>{

        console.log(response);
        
        this.luoghi = response;
 
      },
      error : (error) => {
        console.log("Something went wrong..", error);
        
      }
    })
  }

现在我又创建了两个组件，一个是Home组件，另一个是Card组件，基本的东西。

home 组件负责循环数组中的所有元素，并为屏幕上的每个元素放置一张卡片组件

    <div class="flex justify-center flex-wrap gap-5">
        @for (item of cards; track $index) {
            <app-card></app-card>
        }@empty {
            <p>none</p>
        }
    
    </div>

但是 home.component.ts 中的问题出在哪里，我想做的是创建一个名为 cards 的数组，
注入服务并向卡片提供 GET 调用后服务中存在的数组的值。

 private serviceLuoghi : LuoghiServiceService = inject(LuoghiServiceService);

  public cards : any[] = [];

  ngOnInit(): void {

    this.serviceLuoghi.getAllLuoghi();

    this.cards= this.serviceLuoghi.luoghi

    console.log(this.cards);
        
  }

但是卡片数组是空的。
如何传递数据？

Answer 1

订阅内部的代码是异步的（等待 API 完成），外部的代码是同步的（不等待），所以我希望您看到问题，我们正在 API 完成之前访问属性。因此，解决方案是将分配代码移至订阅中，以便在 API 调用完成后对其进行分配。

getAllLuoghi(){
  return this.http.get("http://localhost:9595/oota-reg/api/luoghi/all")
}

现在服务返回一个可观察量，我们可以在组件内部订阅它，最好订阅组件内部的可观察量而不是服务。

  ngOnInit(): void {
    this.serviceLuoghi.getAllLuoghi().subscribe({
      next : (response : any) =>{
        console.log(response);
        this.serviceLuoghi.luoghi = response; // can remove if not needed!
        this.cards= response;
        console.log(this.cards);
      },
      error : (error) => {
        console.log("Something went wrong..", error);
      }
    })
  }