angularngforasync-pipe

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

I am passing an object 'customer$' through to my html file using an observable and async pipe. The object contains an array of addresses which I would like to use to create a list using *ngFor; however, I am getting the error Property 'address' does not exist on type 'CustomersComponent'. Is it because I am referencing the customer set in the parent div?

here are my component.ts and html files, the line in the htmle file <p>{{ address.addressOne }}</p> is the one resulting in the error

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>

Here is my model for the customer -

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;
    }
}

And here is the model for the address -

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
    }
}

Solution

  • You have a small syntax error.

    It should be *ngFor="let address of customer['interestedAddress']" (forgot let keyword) assuming you made no further mistakes.

    This since the local loop variable doesn't exist Angular searches for address inside the component which doesn't exist leading to the specified error