Question

我想在模式中显示一个对象，所以当我单击“阅读更多”按钮时，它将标题名称和亚马逊链接发送到函数以将其传递给模式，但是ngFor不会显示对象，并且只有一个一次发送的对象，因此我只需要使用html模板中的键和值来显示{{modal.name}}之类的对象

/*Function*/
readMore(text: string) {
    this.modal = text;
 }

  <h1 class="uk-flex uk-flex-center uk-width-1-1">{{book.list_name}}</h1>
  <hr class="uk-divider-icon uk-width-1-1">
  <div class="uk-grid uk-grid-divider textali">
  <div class="uk-width-1-3">List Updated {{book.updated | lowercase }}
  </div>
  <div class="uk-width-1-3">
    <a href="#offcanvas-usage" class="uk-button uk-button-primary" uk-toggle>Categorys</a>
  </div>
  <div class="uk-width-1-3">List Published On {{book.published_date | lowercase |date: 'fullDate'}}
  </div>
</div>
  <div class="uk-grid uk-grid-medium" >
  <div class="uk-child-width-1-5@s uk-grid-match" uk-grid>
    <div *ngFor="let name of book.books; let i = index">
      <div class="uk-card uk-card-hover uk-card-body">
        <img src="{{name.book_image}}"><br /><br />
        <span>Summary: {{name.description || ' NA'}}</span><br />
        <hr class="uk-divider-icon">
        <span>Author {{name.author}}</span>
        <br />
        <br />Best Sellers Rank {{name.rank}}
        <br />
        <span>Weeks on List {{name.weeks_on_list}}</span>
        <div class="uk-card-footer">
          <a href="{{name.amazon_product_url}}" class=" button uk-icon-link uk-margin-small-right" uk-icon="icon: cart; ratio: 1.5"></a>
         <span><a class="uk-icon-link uk-margin-small-right" (click)="addFav({title: name.title, image:name.book_image, amazon:name.amazon_product_url})" uk-icon="icon: heart; ratio: 1.5"></a></span>                   /*This is the data im sending*/
          <a (click)="readMore({name: name.title, desc:name.description, author:name.author})" uk-toggle="target: #read-more" class="uk-icon-link uk-margin-small-right" uk-icon="icon: info; ratio: 1.5"></a>
        </div>
      </div>
    </div>
  </div>
</div>
<div id="offcanvas-usage"  uk-offcanvas>
  <div class="uk-offcanvas-bar">
    <button class="uk-offcanvas-close" (click)="this.isButtonVisible = true" type="button" uk-close></button>
    <h3>Categorys</h3>
    <div *ngFor="let section of names">
      <div class=" uk-flex uk-flex-column">
        <ul class="uk-nav uk-nav-primary uk-nav-center uk-margin-auto-vertical">
          <li class="uk-active"><a (click)="sectionlink(section.list_name)">{{section.list_name}}</a></li>
        </ul>
      </div>
    </div>
  </div>
  </div>
  <div id="read-more" uk-modal>
    
      <div class="uk-modal-dialog uk-modal-body">
          /*Where the Data gets displayed*/
          <h2 class="uk-modal-title">{{item.name}} </h2>
          <hr class="uk-divider-icon">
          <hr class="uk-divider-icon">
          
          <button class="uk-modal-close uk-button uk-button-danger" type="button">Close</button>
          </div>
  </div>

Answer 1

您可以使用keyvalue管道将“对象”或“映射”转换为键值对数组。.
您可以按照以下*ngFor="let o of object | keyvalue"

示例

<th *ngFor="let o of object | keyvalue">{{o.key}}{{o.value}}</th>

有关更多信息，请单击此处keyvalue pipe

如何使用其键在html模板中显示对象

1 个答案: