Question

我正在使用Angular 4开发应用程序。我是Angular的初学者。我需要两件事的帮助：

- 首先：当我点击HTML中的用户名时，我希望在所有出现的对象中匹配使用相同用户名点击的名称。

第二：显示此用户名所在的书籍的标题。

例如：当我点击Jose Miguel时，我想在HTML上看到他读过的2本书。

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>

Angular 4：匹配事件上嵌套的json item-value，在其他对象中具有相同的item-value

1 个答案: