Мастер деталь угловая 4

Question

У меня есть компонент, который отображает список, который, когда я нажимаю на каждый элемент в списке, должен отображать некоторые данные. Данные должны исходить от дочернего компонента. Проблема в том, что теперь, когда я нажимаю на каждый элемент, он отображает данные для всего списка. Я пытаюсь добиться того, чтобы данные отображались только по нажатой ссылке.

Вот мой код HTML компонента:

<ul>
   <li *ngFor = "let book of myBooks; let i = index" > // myBooks is array of books
       Book ID: {{book.id}} , Book name: {{book.name}}. 
      <a href="#" (click)="toggleBookDetails(i)">Book details</a> (click to expand): 
  <div>
      <display-details 
            [showDetails] ="showDetails" 
            [bookDetails]     ="myBooks"
            [bookId]          ="bookId">

      </display-details>

  </div>

 </li>

toggleBookDetails (i) - это просто функция для переключения вида

<display-details> - это компонент, который отображает детали для каждой интерактивной ссылки

Это компонент:

export class BookDetailsComponent {

  constructor( ) { }

   @Input() bookDetails: bookDetails;
   @Input() bookId: string;
   @Input() showDetails: boolean;
 }

и это вид:

<div *ngIf="showDetails">
        {{bookDetails[bookId].details.title}},  
        {{bookDetails[bookId].details.ISBN}}

</div>

Что происходит сейчас, когда я нажимаю на любую ссылку, она отображает детали для всего списка. Я хочу отображать детали только для конкретной ссылки, которая нажала.

Спасибо.

Answer 1

У вас есть большая часть этого, только небольшие изменения:

1. Изменить книгуДетали для привязки к книге
2. Сделать видимость на основе массива, который проиндексирован i
3. Отправить book.id, а не весь bookId
4. Опционально используйте кнопку вместо того, чтобы привязывать к одному и тому же обработчику кликов

В вашем переключателе обязательно установите showDetails [i] на true или false, в зависимости от ситуации. Убедитесь, что вы инициализируете его как пустой массив при объявлении: showDetails: boolean [] = [];

<ul>
   <li *ngFor = "let book of myBooks; let i = index" > // myBooks is array of books
       Book ID: {{book.id}} , Book name: {{book.name}}. 
      <a href="#" (click)="toggleBookDetails(i)">Book details</a> (click to expand): 
  <div>
      <display-details 
            [showDetails] ="showDetails[i]" 
            [bookDetails]     ="book"
            [bookId]          ="book.id">

      </display-details>

  </div>

 </li>

Детали вашего шоу будут:

    toggleBookDetails(i:number){
     if(this.showDetails[i]==false){
          this.showDetails[i]=true;
       }else{
          this.showDetails[i]=false;
       }
    }