Angular 4: сопоставить вложенное значение элемента json в событии с тем же значением элемента в других объектах

Я работаю над приложением с Angular 4. Я новичок в Angular. Мне нужна помощь с двумя вещами:

- Во-первых: когда я нажимаю на имя пользователя в HTML, я хочу сопоставить имя, на которое нажали, с тем же именем пользователя во всех объектах, в которых оно присутствует.

Второе: отображать название книг, в которых присутствует это имя пользователя.

Например: когда я нажимаю на Хосе Мигеля, я хочу увидеть в HTML две книги, которые он прочитал.

json-данные:

books = [
        {
            "title": "title1",
            "author": "author1",
            "users": [
                {
                    "id": 1,
                    "name": "Isidro"
                },
                {
                    "id": 4,
                    "name": "Jose Miguel"
                },
                {
                    "id": 3,
                    "name": "Trinidad"
                }
            ]
        },
        {
            "title": "title2",
            "author": "author2",
            "users": [
                {
                    "id": 4,
                    "name": "Jose Miguel"
                },
                {
                    "id": 5,
                    "name": "Beatriz"
                },
                {
                    "id": 6,
                    "name": "Rosario"
                }
            ]
        },

HTML:

<div style="text-align:center">
  <ul class="books">
    <li *ngFor="let book of books" >
        Título: {{book.title}} <br> Autor: {{book.author}}<br>
        <ul style="text-align:center" class="recentUsers">
            <li *ngFor="let user of book?.users" (mouseenter)="myEvent($event)" class="individualUsers">{{user.name}}</li> 
        </ul>
    </li>
  </ul>
</div>

До сих пор мне удавалось отображать все книги и недавних пользователей, прочитавших каждую конкретную книгу.

(mouseenter)="myEvent($event)" - это только запись в консоль, как вы можете догадаться, имя первого пользователя первой книги, но это не то, что мне нужно. Это та часть, с которой мне нужна помощь.

import { Component, OnInit } from '@angular/core';
import { BooksService } from '../books.service';

@Component({
  selector: 'app-completo',
  templateUrl: './completo.component.html',
  styleUrls: ['./completo.component.css']
})
export class CompletoComponent implements OnInit {

  constructor(private booksService: BooksService){

  }
  books = [];

  ngOnInit(){
    this.booksService.getBooks().subscribe(responseBooks => this.books =responseBooks);

  }
  myEvent(){
  console.log(this.books[0].users[0].name)
    event.preventDefault();
  }
}

events json angular nested
person elena_in_code    schedule 18.10.2017    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Вы можете просто отфильтровать список книг в своем мероприятии:

readBooks: Array;

// ...

showReadBooksForUser(userId: number) {
  readBooks = books.filter(
    (book) => book.users.findIndex((user) => user.id == userId) > -1
  );
}

resetReadBooks() {
  readBooks = null;
}

И, возможно, что-то подобное в вашем HTML:

<div style="text-align:center">
  <ul class="books">
    <li *ngFor="let book of books" >
        Título: {{book.title}} <br> Autor: {{book.author}}<br>
        <ul style="text-align:center" class="recentUsers">
            <li *ngFor="let user of book?.users" 
                (mouseenter)="showReadBooksForUser(user.id)" 
                (mouseleave)="resetReadBooks()"
                class="individualUsers">{{user.name}}</li> 
        </ul>
    </li>
  </ul>

  <!-- display book div with appropriate css? -->
  <div *ngIf="readBooks" id="readBooksOverlay">
    <ul>
      <li *ngFor="let book of readBooks">{{book.title}}</li>
    </ul>
  </div>

</div>
person rinukkusu    schedule 18.10.2017
comment
большое спасибо за твою помощь! Пришлось внести некоторые изменения: readBooks: Array‹string›; showReadBooksForUser(userId: number) { this.readBooks = this.books.filter( (book) =› book.users.findIndex((user) =› user.id == userId) › -1); } resetReadBooks() { this.readBooks = null; } - person elena_in_code; 18.10.2017