Angular2 : access method of a class in template

Question

I have the following class in an Angular2 app

export class Contact {

  constructor(
    public has_reply: boolean,
    public archived: boolean
  ) {  }

  getStatus() : string {
    if (this.archived) {
      return "Archived";
    }

    if (this.has_reply) {
      return "Answered";
    }

    return "Waiting";
  }
}

which is returned by a service

@Injectable()
export class ContactsService {

  private contactsData : BehaviorSubject<Array<Contact>> = null;

  constructor(private http: Http) {
    this.contactsData = new BehaviorSubject<Array<Contact>>([]);
  }

  /**
   * get the list of contacts
   */
  populateContacts() : Array<Contact> {
    return this.http.get('/api/contacts/').map(
      (res: Response) => {return res.json()}
    ).subscribe(
      jsonData => {
        this.contactsData.next(<Array<Contact>> jsonData);
      }
    );
  }

  onContactsChanged() : Observable<Array<Contact>>{
    return this.contactsData.asObservable();
  }

}

which is used in a component

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.css']
})
export class HomeComponent implements OnInit {

  private contacts: Array<Contact>  = [];

  constructor(
    private contactsApi : ContactsService
  ) { }

  ngOnInit() {
    this.contactsApi.onContactsChanged().subscribe(
      (contacts: Array<Contact>) => {this.contacts = contacts;}
    );
    this.contactsApi.populateContacts();
  }

}

and displayed in a template

<table class="table table-striped table-bordered">
  <tr *ngFor="let contact of contacts">
    <td>
     {{ contact.getStatus() }}
    </td>
  </tr>

I get the following error

EXCEPTION: Error in ./HomeComponent class HomeComponent - inline
template:11:8 caused by: self.context.$implicit.getStatus is not a function

What is wrong in my approach? Does Angular2 allow to call a class method like this?

Note : Calling method from a Angular 2 class inside template looks similar question but it did not help

Answer 1

As suggested by @AdnanA, the problem is a casting issue. See How to do runtime type casting in TypeScript?

I fixed by casting each object of the array: See https://stackoverflow.com/a/32186367/117092

// Thank you! https://stackoverflow.com/a/32186367/117092
function cast<T>(obj, cl): T {
  obj.__proto__ = cl.prototype;
  return obj;
}

@Injectable()
export class ContactsService {

  private contactsData : BehaviorSubject<Array<Contact>> = null;

  constructor(private http: Http) {
    this.contactsData = new BehaviorSubject<Array<Contact>>([]);
  }

  /**
   * get the list of contacts
   */
  populateContacts() : Array<Contact> {
    return this.http.get('/api/contacts/').map(
      (res: Response) => {return res.json()}
    ).subscribe(
      jsonData => {
        // WRONG! this.contactsData.next(<Array<Contact>> jsonData);
        // FIXED BY
        let contactsArray: Array<Contact> = [];
        for (let i=0, l=jsonData.length; i<l; i++) {
          let contact = cast<Contact>(jsonData[i], Contact);
          contactsArray.push(contact);
        }
        this.contactsData.next(contactsArray);
      }
    );
  }

  onContactsChanged() : Observable<Array<Contact>>{
    return this.contactsData.asObservable();
  }

}

Answer 2

如果数据是异步获取的，则需要注意避免null

{{ contact?.getStatus() }}