Question

我有一个显示行的角度模板。我添加了一个按钮以在当前行上显示一些信息。问题是：当我单击按钮行1时，所有行上都显示了信息。

我在这里放了一段代码，再现了我的问题

https://stackblitz.com/edit/angular-nmhrty

谢谢！

Answer 1

您需要以某种方式控制单击的按钮，我将此信息放入数组中，希望对您有所帮助：

https://stackblitz.com/edit/angular-bawglg?file=src/app/app.component.ts

Answer 2

尝试一下：

<div *ngFor="let test of items; index as i" >
  <div class="resultRow newRow" [class.resultRow-mobile]="mobileMode">
        <div *ngIf="!mobileMode" class="expandThis">
            <span (click)="toggleDocuments(i)">CLICK</span>
        </div>
        <ng-container *ngIf="visibleDocuments[i]">
            <p>OK</p>
        </ng-container>
  </div>
</div>

组件

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  name = 'Angular';
  show:boolean = false;
  items:any[] = ['1', '2'];
  visibleDocuments = new Array(this.items.length);

  toggleDocuments(index){
        this.visibleDocuments[index] = !this.visibleDocuments[index];
    }

}

StackBlitz link

Answer 3

我分叉了您的代码片段，并用我认为您要的内容进行了更新：

https://stackblitz.com/edit/angular-gt3jmk

我建议您将显示/不显示状态存储在要显示的每个项目中。这样，您可以分别切换每个视图的可见性。您可以通过在每个项目的数据之外添加一个show属性来实现此目的。

Answer 4

这是解决方案的示例：

componet：

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  name = 'Angular';
  item1: {info: string, show: boolean} = {info:'item 1 - info', show: false};
  item2: {info: string, show: boolean} = {info:'item 2 -info', show: false};
  items = [this.item1, this.item2];

  toggleDocuments(item: {info: string, show: boolean}){
        item.show = ! item.show;
    }

}

模板：

<div *ngFor="let test of items" >
  <div class="resultRow newRow" [class.resultRow-mobile]="mobileMode">
        <div *ngIf="!mobileMode" class="expandThis">
            <span (click)="toggleDocuments(test)">CLICK</span>
        </div>
        <ng-container *ngIf="test.show">
            <p>{{test.info}}</p>
        </ng-container>
  </div>
</div>

如何逐行显示div-模板Angular

4 个答案: