属性 'Component' Angular 12 类型上不存在“<>”

Question

我正在使用可观察和异步管道将对象 'customer$' 传递到我的 html 文件。该对象包含一个地址数组，我想用它来使用 *ngFor 创建一个列表；但是，我收到错误 Property 'address' does not exist on type 'CustomersComponent'. 是因为我引用了父 div 中的客户集吗？

这是我的 component.ts 和 html 文件，htmle 文件 <p>{{ address.addressOne }}</p> 中的行是导致错误的行

import { Component, OnInit } from '@angular/core';
import { Observable } from 'rxjs';
import { ActivatedRoute } from '@angular/router';

import { Customer } from '../shared/models/customer.model'

import { CustomersService } from './customers.service';
import { Address } from '../shared/models/address.model';

@Component({
  selector: 'app-customers',
  templateUrl: './customers.component.html',
  styleUrls: ['./customers.component.scss']
})

export class CustomersComponent implements OnInit {
  customer$!: Observable<Customer | undefined>;

  constructor(
    private customerService: CustomersService,
    private activatedRoute: ActivatedRoute,
    ) { }

  ngOnInit(): void {
    const id = this.activatedRoute.snapshot.params.id

    this.customer$ = this.customerService.getCustomer(id);
  }

}

<div class="container" *ngIf="customer$ | async as customer">
    <div class="customer-header">
        <h1>{{ customer['people'][0].firstName }} {{ customer['people'][0].lastName }}</h1>
        <p> {{ customer['people'][0].email }}</p>
        <p> {{ customer['people'][0].phoneNumber }}</p>
    </div>
    <div class="interested-addresses" *ngIf="customer['interestedAddress']">
        <ng-container *ngFor="address of customer['interestedAddress']">
            <p>{{ address.addressOne }}</p>
        </ng-container>
    </div>
</div>

这是我给客户的模型 -

import {Address} from './address.model'
import {Person} from './person.model'
import {Note} from './notes.model'

export class Customer {
    public id: string;
    public people: Person[];
    public interestedAddress: Address[];
    public notes: Note[];
    public underContract: boolean;


    constructor (id: string, people: Person[], interestedAddress: Address[], notes: Note[], underContract: boolean) {
        this.id = id;
        this.people = people;
        this.interestedAddress = interestedAddress;
        this.notes = notes;
        this.underContract = underContract;
    }
}

这里是地址的模型 -

export class Address {
    public addressOne: string;
    public addressTwo?: string;
    public city: string;
    public stateCode: string;
    public zipCode: string;

    constructor (addressOne: string, city: string, stateCode: string, zipCode: string, addressTwo?: string) {
        this.addressOne = addressOne;
        this.city = city;
        this.stateCode = stateCode,
        this.zipCode = zipCode,
        this.addressTwo = addressTwo
    }
}

Answer 1

您有一个小的语法错误。

应该是 *ngFor="let address of customer['interestedAddress']"（忘记了 let 关键字）假设你没有再犯错误。

这是因为局部循环变量不存在 Angular 在不存在的组件内搜索 address 导致指定的错误

属性 'Component' Angular 12 类型上不存在“<>”

Property '<>' does not exist on type 'Component' Angular 12

angular

ngfor

async-pipe