时间戳

首页 > 解决方案 > 有没有一种简单的方法来隐藏由数组组成的多个元素

angular - 有没有一种简单的方法来隐藏由数组组成的多个元素

问题描述

我试图以最有效的方式隐藏一个元素，但我不知道如何。我喜欢用 Jquery 的方式来做，我给每个元素一个 ID 属性，然后像这样，$("div" + id).hide();. 有没有办法在角度做到这一点？

我这样做。

HTML

<div *ngFor="let arr of arrs; let i = index">
   <div #div1> {{arr.name}} </div>
   <div>
        <button (click)="hideSomeElement(div1, div2, div3)">
   </div>
   <div #div2> {{arr.name}} </div>
   <div #div3> {{arr.name}} </div>
</div>

我的.ts

let arrs = [
    {
      id: 0,
      name: 'arr1'
    }, {
      id: 1,
      name: 'arr2'
    }
];

hideSomeElement(d1, d2, d3) {
   d1.hidden = true;
   d2.hidden = true;
   d3.hidden = true;
}

标签： angular

解决方案

一个更好的方法是为arrs. 类似的东西visibility。false根据id函数调用传递的 s将其设置为：

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

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  arrs = [
    {
      id: 0,
      name: 'arr1',
      visible: true,
    },
    {
      id: 1,
      name: 'arr2',
      visible: true,
    },
    {
      id: 2,
      name: 'arr3',
      visible: true,
    },
    {
      id: 3,
      name: 'arr4',
      visible: true,
    },
    {
      id: 4,
      name: 'arr5',
      visible: true,
    },
  ];

  hideSomeElement(...divIdsToHide) {
    this.arrs.forEach(arr => {
      arr.visible = divIdsToHide.indexOf(arr.id) > -1 ? false : true;
    });
  }
}

在您的模板中：

<div *ngFor="let arr of arrs; let i = index">
  <span *ngIf="arr.visible">
    {{arr.name}}
  </span>
</div>
<button 
  (click)="hideSomeElement(1, 2, 3)">
  Hide Divs
</button>

这是您参考的工作示例 StackBlitz。

推荐阅读