javascript - 从 Angular 对象的数据数组填充 View

Question

我在变量 requestData 中有一个数据存储，我想用它来填充通知组件 View

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

在 View 中填充上述数据后， View 应该如下图所示

这是 notification.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}}

Working stackblitz example here..