角4：他のオブジェクトの同じ項目値を持つイベントのネストされたjson項目値に一致します。

Question

私は角4のアプリケーションで作業しています。 私は角を持つ初心者です。

- まず：私は2つのことで助けを必要 私はHTMLでユーザー名をクリックしたときに、私は名前を一致させたい、それが中に存在するすべてのオブジェクトに同じユーザー名でクリック

。

2番目：このユーザー名が存在する書籍のタイトルを表示します。

たとえば、私がJose Miguelをクリックすると、彼は彼が読んだ2冊の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(); 
    } 
} 

Answer 1

あなたは、単にあなたのイベントで本のリストをフィルタリングすることができます

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>