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

你完成了大部分工作 - 只是做了一些小改动：

更改bookDetails以绑定到book
根据由i
发送book.id，而不是整本书
可选使用按钮而不是绑定到同一个点击处理程序

在切换中，请务必将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;
       }
    }

主细节Angular 4

1 个答案: