Только первый элемент отображается в HTML

Question

Я загружаю массив "Client" в функцию NgOnInit в моем компоненте. После этого вызова я хочу инициализировать массив типа «TimeSheet», который содержит «Client» в качестве элемента. Я делаю это так:

init(clients : Client[]) {
    let i = 0;
    this.timeSheets = new Array(clients.length);
    for(let client of clients) {
        console.log("client firstname" + client.firstName);
        this.timeSheets[i] = new TimeSheet();
        this.timeSheets[i].client = client;
        console.log("client last name in timesheet: " + 
        this.timeSheets[i].client.lastName);
        i++;
    }
}    

Печать консоли браузера показывает мне правильные значения клиента:

client firstname Hans
client last name in timesheet: Müller
client firstname John
client last name in timesheet: Smith
client firstname Marie
client last name in timesheet: Curie

Однако в моем HTML-шаблоне отображается только первый элемент. Это раздел, в котором я вставил свой интерфейс:

<tr *ngFor="let timeSheet of timeSheets ;trackBy: trackId">
    <td>{{timeSheet.client.lastName}}</td>
    <td>{{timesheet.client.firstName}}</td>
    <td><input type="text" (change)="calculate($index)"></td>
    <td><input type="text"></td>
</tr>

Любопытно, что отображается только «lastName» «Клиента» в самом первом «Расписании», а остальные, похоже, дают сбой без указания причины. Поскольку мои метки также исчезли, я полагаю, что в моем HTML-коде есть какая-то ошибка. Моя консоль браузера также указала, что «клиент» не определен, что сбило меня с толку, так как первый элемент напечатан правильно.

ERROR TypeError: Cannot read property 'client' of undefined

Вот как это выглядит:

Кроме того, метка кнопки и заголовки таблицы пропали, поэтому я предполагаю, что в коде есть какая-то ошибка. Пожалуйста, помогите мне найти это.

Answer 1

{{timesheet.client.firstName}}
Должно быть
{{}} TimeSheet.client.firstName
Блокнот