查看不使用typescript对象更新Aurelia

Question

我正在努力学习Aurelia。我有一个联系人列表，我更新了相关视图模型中的一个联系人，但即使数组中的对象已在viewmodel中更新，视图中的对象也不会。我的印象是在Aurelia和Typescript中通过引用传递对象。

我有一个包含contacts对象的contact数组。我订阅了监听contact对象更新。我通过在之前和之后注销来检查联系人是否已更新。但是，链接的视图不会更新。

以下代码片段：

IContact界面，

export interface IContact {
    id: number;
    firstName: string;
    lastName: string;
    email: string;
    phoneNumber: string;
    birthDate: Date;
}

视图模型：

export class ContactList {
    contacts: IContact[]; <-- Array of contact objects
    selectedId = 0;
    keyword: string;

    constructor(private router: Router, private contactService: InMemoryContactService,
            private ea: EventAggregator) {
        ea.subscribe(ContactViewed, msg => this.select(msg.contact));
        ea.subscribe(ContactUpdated, msg => {
            console.log("Contact id: " + msg.contact.id);
            console.log("Contact first: " + msg.contact.firstName);
            console.log("Contact last: " + msg.contact.lastName);
            console.log("Contact email: " + msg.contact.email);
            console.log("Contact phone: " + msg.contact.phoneNumber);

            let id = msg.contact.id;
            let found = this.contacts.find(x => x.id === id);
            Object.assign(found, msg.contact);

            if (found) {
                console.log("Found after id: " + found.id);
                console.log("Found after first: " + found.firstName);
                console.log("Found after last: " + found.lastName);
                console.log("Found after email: " + found.email);
                console.log("Found after phone: " + found.phoneNumber);
            } else {
                console.log("Found after undefined");
            }
        });
    }
...

查看：

  <div class="form-group">
    <div class="col-sm-12">
      <div class="contact-list">
        <ul class="list-group">
          <li repeat.for="contact of contacts" class="list-group-item ${contact.id === $parent.selectedId ? 'active' : ''}">
            <a route-href="route: contacts; params.bind: {id:contact.id}" click.delegate="$parent.select(contact)">
              <h4 class="list-group-item-heading">${!contact.firstName && !contact.lastName ? "New Contact" : contact.firstName + " " + contact.lastName }</h4>
              <p class="list-group-item-text">${contact.email}</p>
            </a>
          </li>
        </ul>
      </div>
    </div>
  </div>