Angular11：类型 'Subscription' 缺少类型 'HomeData' 的以下属性：

Question

我正在尝试从后端服务器检索数据，但出现以下错误：类型 'Subscription' 缺少类型 'HomeData' 中的以下属性：aSes、aggregatorChanges、announces、beaconAnnouncements、还有 11 个。

我正在使用以下服务

export class HomeService {

  constructor(private http: HttpClient) { }


getData(): Observable<HomeData>{
  return this.http.get<HomeData>('https://bgpie.net/api/rrc/00');

}
}

和以下界面：

export interface HomeData{
aSes: number;
aggregatorChanges: number;
announces: number;
beaconAnnouncements: number;
beaconSequences: number;
beaconWithdrawals: number;
cPs: number;
containingLoops: number;
containsAggregator: number;
moreThanOneAsOrigin: number;
prefixes: number;
prefixv4: number;
prefixv6: number;
sequences: number;
withdraws: number;
}

我在我的组件中调用 getData() 是这样的：

export class HomeComponent implements OnInit {
  elements!: HomeData;
  constructor(private http: HttpClient,
              private homeService: HomeService) {
   }

  ngOnInit(): void {
    this.elements = this.homeService.getData().subscribe((data: HomeData) => {this.elements = data; });
  }

我把所有这些都放在我的 html 模板中

<ul>
  <li *ngFor = "let element of elements">
    Total number of Sequences: <b>{{element.sequences}}</b>
    <br>Distinct Prefixes involved in Sequences: <b>{{element.prefixes}}</b>
    <br>BGP Updates involved in Sequences: /// (Announces: <b>{{element.announces}}</b>, Withdrawals: <b>{{element.withdraws}}</b>)
    <br>Total number of BGP Updates collected by RRC00 in 2019: /// (Announces: ///, Withdraws: ///)
    <br>Percentage of BGP Updates belonging to Sequences: /// (Announces: ///, Withdrawals: ///)
    <br>Distinct Collctor Peers (CPs) that observed at least a Sequences: <b>{{element.cPs}}</b>
    <br>Distinct ASes originating the prefexes involved in the Sequences: <b>{{element.aSes}}</b>
    <br>Number of AB-BA Sequences (whose AS-path contains pattern xAyBz and x'By'Az'): <b>{{element.containingLoops}}</b>
    <br>Sequences that are originated by an IPv4 Prefix: <b>{{element.prefixv4}}</b>
    <br>Sequences that are originated by an IPv6 Prefix: <b>{{element.prefixv6}}</b>
    <br>Sequences whose prefix is announced by more than one AS: <b>{{element.moreThanOneAsOrigin}}</b>
    <br>Sequences that contain at least one announcement with the BGP Path Attribute Aggregator set: <b>{{element.containsAggregator}}</b>
    <br>Sequences that contain at least two announcement with different values of the BGP Path Attribute Aggregator: <b>{{element.aggregatorChanges}}</b>
    <br>Sequences originated by a known beacon prefix: <b>{{element.beaconSequences}}</b>
    <br>BGP Updates originated by a known beacon prefix: <b>{{element.beaconAnnouncements + element.beaconWithdrawals}}</b> (Announcements: {{element.beaconAnnouncements}}, Withdrawals: {{element.beaconWithdrawals}})
    <br>Percentage of BGP Updates originated by a known beacon prefix: /// (Announcements: ///, Withdrawals: ///)
  </li>
</ul>

Answer 1

您正在将订阅分配给变量 elements。相反，它应该是以下

ngOnInit(): void {
  this.homeService.getData().subscribe(
    (data: HomeData) => { this.elements = data; },
    (error: any) => { /* handle error */ }
  );
}

Angular11：类型 'Subscription' 缺少类型 'HomeData' 的以下属性：

Angular11: Type 'Subscription' is missing the following properties from type 'HomeData':

get

http

angular