Блог

Главная - Вопросы по программированию - Как отобразить объект в html-шаблоне, используя его ключи

Как отобразить объект в html-шаблоне, используя его ключи

#angular #typescript

#angular #typescript

Вопрос:

Я хочу, чтобы объект отображался в модальном режиме, поэтому, когда я нажимаю кнопку «Подробнее», он отправляет название заголовка и ссылку Amazon в функцию для передачи его в модальный режим, но ngFor не будет отображать объект, и одновременно будет отправляться только один объект, поэтому мне просто нужно показать объект как {{modal.name }} используя ключ и значение в html-шаблоне

 /*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>

Ответ №1:

Вы можете использовать keyvalue канал для преобразования объекта или карты в массив пар ключ-значение..
вы можете использовать следующее *ngFor="let o of object | keyvalue"

Пример

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

Для получения дополнительной информации нажмите здесь канал keyvalue

Комментарии:

1. Спасибо, есть ли способ, которым я могу конкретно получить доступ к ключу и значению certon, например, я хочу поместить заголовок в тег h2 и desc в тег p

2. да, вы можете это сделать. как предположим, <h2>{{o.key}}</h2> <p>{{o.value}}</p> просто добавьте их в свой цикл

3. если вы все еще сталкиваетесь с какой-либо проблемой, дайте мне знать

4. Извините, я имею в виду <h1> {{item.key}}{{item.value}}<{h1> Так что только имя будет отображаться без ngFor, потому что оно будет просто перебирать массив, но я просто хочу иметь возможность выбирать, какую информацию я показываю, если вы меня поймете

5. да, но вам нужно написать пользовательскую функцию и получить возвращаемое значение ключа.