如何逐行显示 div - 模板 Angular

Question

我有一个显示行的 angular 模板。我添加了一个按钮来显示当前行的一些信息。问题是：当我点击第 1 行按钮时，信息显示在所有行上。

我在这里放了一小段重现我的问题的代码

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

提前致谢！

Answer 1

不知怎么的，你需要控制你点击了哪个按钮，我把这些信息放在de数组中，希望对你有所帮助：

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

这是一个解决方案示例：

组件：

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

How to show div line by line - template Angular

templates

show

angular