Question

我有一些来自循环和json的div。在这里我又在主要div内有2个div。最初只显示“ show table”和chart1。当我单击'show table'时，'show chart'和table1应该仅显示而'show table'和chart1应该隐藏。当我单击'显示图表”。应该根据每个div进行。这是下面的代码，我对Angular 7是陌生的，任何人都可以帮助我。

app.component.html

<div style="float:left;margin-right:10px;border:1px solid; height:200px;width:200px;" class="list" *ngFor="let x of array">
 <div (click) ="showChart()" ><strong>show chart</strong></div>
  <div (click) ="showTable()"><strong>show table</strong></div>
  <div>{{x.chart}}</div>
  <div>{{x.table}}</div>
</div>

app.component.ts

    import { Component,OnInit } from '@angular/core';
    @Component({
      selector: 'app-root',
      templateUrl: './app.component.html',
      styleUrls: ['./app.component.css'],
      changeDetection: ChangeDetectionStrategy.OnPush
    })
    export class AppComponent implements OnInit{
        public array = [{"id":1,"chart":"chart1","table":"table1"},{"id":2,"chart":"chart2","table":"table2"},{"id":2,"chart":"chart3","table":"table3"}];
 showChart(){
      alert("chart");
   }
   showTable(){
      alert("table");
   }

Answer 1

您需要做一些事情。

在数据结构中，维护标志以将表和图表显示为

{"id":1,"chart":"chart1","table":"table1", "showTable": true, "showChart": true}

使用这些布尔标志来保持显示和隐藏为的状态

<div (click)="x.showChart = !x.showChart"><strong>show chart</strong></div>

，并在您的*ngIf指令中将其用作

<div *ngIf="x.showChart">{{x.chart}}</div>

我宁愿使用[class]绑定将div显示和隐藏为

<div [class.active]="x.showChart">{{x.chart}}</div>

其中类active将在页面上显示该元素，否则该元素将被隐藏

Answer 2

无需触摸原始array的数据，您可以通过创建第二个数组来跟踪单个项目的可见性来轻松解决此问题。

只需在您的AppComponent中放置以下属性即可：

public visibility = [];

并像下面这样在您的模板中使用它：

<div style="..." class="list" *ngFor="let x of array">
  <div (click)="visibility[x.id] = 'chart'"><strong>show chart</strong></div>
  <div (click)="visibility[x.id] = 'table'"><strong>show table</strong></div>
  <div *ngIf="visibility[x.id] === 'chart'">{{x.chart}}</div>
  <div *ngIf="visibility[x.id] === 'table'">{{x.table}}</div>
</div>

这是一个堆叠闪电战：https://stackblitz.com/edit/angular-playground-btvfcw

请注意，在您的app.component.ts中，第二项和第三项具有相同的ID 2。我修好了。

编辑：如果需要，还可以使按钮切换当前视图：

  <div (click)="visibility[x.id] = (visibility[x.id] === 'chart' ? '' : 'chart')"><strong>show chart</strong></div>
  <div (click)="visibility[x.id] = (visibility[x.id] === 'table' ? '' : 'table')"><strong>show table</strong></div>

当div来自角度6中的循环时，如何交换2个div onclick链接

app.component.html

app.component.ts

2 个答案: