Заполнение представления из массива данных объектов Angular

Question

У меня есть хранилище данных в переменной requestData , которое я хочу использовать при заполнении представления компонента уведомлений

requestData = {
    "bookId": "5e5bb8ac59441513cca2e64c",
    "bookTitle": "Take Great Photographs",
    "request": [
        {
            "_id": "5e21d286b3ee501ebc39d899",
            "firstname": "Ibaji",
            "lastname": "Offor"
        },
        {
            "_id": "5e2c5a20aff8434278639ff5",
            "firstname": "Cheksmate",
            "lastname": "Fidelis"
        }
    ]
}

представление должно выглядеть как изображение ниже после представление заполнено указанными выше данными

это код для уведомления.component. html

<section class="main profile " my-books>
    <div class="profile-header">
      <h1>Notifications</h1>
    </div>

    <div class="book-list-header">
      <h2>Showing Recent Notifications</h2>
      <!-- <span>(Confirm by click the recieved button once book is returned)</span> -->
    </div>

    <div history *ngFor="let item of requestData">
      <a [routerLink]="['details']">
        <h3>9:15 AM | Mon, Feb 11, 2019</h3>
        <div class="first">
          <span>
            <span class="image-cropper" style=" width: 36px; height: 36px;">
              <img src="assets/images/avatar.jpg" alt="profile image" avatar>
            </span>
            <h4>{{item.request.firstname}} {{item.request.lastname}}</h4>
          </span>

          <span>
            <h3>Book Title</h3>
            <h4>{{item.bookTitle}}</h4>
          </span>
        </div>
      </a>
    </div>

</section>

Любая попытка помочь будет очень признательна

Answer 1

Из вышеупомянутого requestData данные являются объектом, и вы пытаетесь использовать *ngFor="let item of requestData" для недопустимого объекта, который должен выдать ошибку.

Причина в том, что массивы являются только итерируется в *ngFor .. Поэтому измените приведенный выше код следующим образом:

<div history *ngFor="let item of requestData.request">
  <a [routerLink]="['details']">
    <h3>9:15 AM | Mon, Feb 11, 2019</h3>
    <div class="first">
      <span>
        <span class="image-cropper" style=" width: 36px; height: 36px;">
          <img src="https://www.w3schools.com/howto/img_avatar.png" style="width:50px; border: 2px solid #fff; border-radius:50%" alt="profile image" avatar>
        </span>
        <h4>{{item.firstname}} {{item.lastname}}</h4>
      </span>

      <span>
        <h3>Book Title</h3>
        <h4>{{requestData.bookTitle}}</h4>
      </span>
    </div>
  </a>
</div>

Здесь requestData.request - массив, поэтому вам нужно итерировать только этот массив, используя *ngFor, и заменить {{item.request.firstname}} с {{item.firstname}} и т. д. для всех связанных данных.

Чтобы присвоить значение bookTitle, вам необходимо использовать это прямо из объекта,

{{requestData.bookTitle}}

Пример рабочего стекаблица здесь ..