在循环中构建 div 并在按钮按下角度时显示它们

Question

我想循环制作 div 并通过按下特定按钮显示我选择的 div。 从理论上讲，我看到如下...... 使用 *ngFor 我为它们构造 div 和按钮 让我们说

<div>div1</div><button (click)="showDiv(divID)">showDIV</button>

要隐藏 div 我必须使用 ngIf

 <div *ngIf="Here I must place something wih divID">>div1</div><button (click)="showDiv(divID)">showDIV</button>

并且在 ts 文件中，当我按下它的按钮时，我必须将具有 divID 的值设置为 TRUE。

那么我该怎么做呢，我想它必须是数组或其他东西。 请给我必须在模板和ts文件中写入的解决方案示例

用于动态数组构建的 ts 文件的一部分。

data.length=6
i=1
        data.forEach(element => {
Here I want to add variable to array
          this.i++;
        });

Answer 1

您可以通过以下方式实现您的要求。

请参考以下示例 示例代码：

app.component.ts

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  divisions = [
    {
      content: 'Div 1 content .......',
      visibility: false
    },
    {
      content: 'Div 2 content .......',
      visibility: false
    },
    {
      content: 'Div 3 content .......',
      visibility: false
    },
    {
      content: 'Div 4 content .......',
      visibility: false
    },
  ];

  toggleDiv(index: number) {
    this.divisions[index].visibility = !this.divisions[index].visibility;
  }
}

app.component.html

<div class="container">
  <ng-container *ngFor="let div of divisions;let i=index">
    <div class="div-btn">
      <button type="button" (click)="toggleDiv(i)" class="btn btn-primary">{{div.visibility===false? 'Show': 'Hide' }}
       Div {{i+1}}</button>
    </div>
    <div *ngIf="div.visibility" class="div-content">{{div.content}}</div>
  </ng-container>
</div>

app.component.css

.div-content {
  height: 100px;
  border: 1px solid #ccc;
  padding: 10px;
  margin: 10px;
}

.div-btn{
  padding: 10px;
  margin: 10px;
}

Answer 2

你可以在控制器中定义一个数组

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

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent implements OnInit {
  buttons = [];

  ngOnInit() {
    for (let i=1; i<=5; i++) {
      this.buttons.push({
        id: i, show: false
      });
    }
  }
}

并用它在模板中动态显示按钮

<div *ngFor="let button of buttons">
  <button (mouseup)="button.show = !button.show">
    {{ button?.show ? ('Hide ' + button?.id) : ('Show ' + button?.id) }}
  </button>
  <ng-container *ngIf="button?.show">
    Content for button {{ button?.id }}
  </ng-container>
</div>

工作示例：Stackblitz

文档：*ngFor 和 *ngIf 指令、expression interpolation、<ng-container> tag。

如果您是 Angular 新手，我还建议您通过官方 tutorial。它介绍了所有这些基础知识。