无法在 Angular 中读取未定义的属性（读取“订阅”）

只是想弄清楚一些事情。

所以我以角度创建了服务和组件但是我收到了一个错误 - 无法读取未定义的属性（读取“订阅”）

想知道我哪里出错了。

请看下面的代码：

服务

import { HttpClient } from "@angular/common/http";
import { Injectable } from "@angular/core";
import { of } from "rxjs";
import { map } from "rxjs/operators";
import { environment } from "src/environments/environment";
import { Policy } from "../models/Policy";

@Injectable({
  providedIn: "root",
})
export class PolicyholdersService {
  baseUrl = environment.apiUrl;
  policy: Policy[] = [];

  constructor(private http: HttpClient) {}

  getPolicyHolders() {
    if (this.policy.length > 0) {
      return of(this.policy);
    }
    this.http.get<Policy[]>(this.baseUrl + "policy").pipe(
      map((policy) => {
        this.policy = policy;
        return policy;
      })
    );
  }
}

零件

import { Component, OnInit } from "@angular/core";
import { Policy } from "src/app/models/Policy";
import { PolicyholdersService } from "src/app/_services/policyholders.service";

@Component({
  selector: "app-policy-holder-list",
  templateUrl: "./policy-holder-list.component.html",
  styleUrls: ["./policy-holder-list.component.css"],
})
export class PolicyHolderListComponent implements OnInit {
  holders: Policy[];

  constructor(private policyservice: PolicyholdersService) {}

  ngOnInit() {
    this.loadPolicyHolder();
  }

  loadPolicyHolder() {
    this.policyservice.getPolicyHolders().subscribe((holders) => {
      this.holders = holders;
    });
  }
}

HTML

<div class="row">
  <div class="col-2">
    <p *ngFor="let holder of holders">{{ holder.policyNumber }}</p>
  </div>
</div>