Question

基本上我通过传递一些数据来创建多个div。并尝试根据某些条件隐藏相同的div。

它正在创建多个div，但无论条件如何，它都会隐藏所有div。

如果我通过＆＃34; on：true＆＃34;对于一个div，它隐藏了所有div。这可能是因为我在所有元素上运行的forEach循环。但不知道如何解决它。

这是我的打字稿代码---＆gt;

＆＃13;

export class ShowDataComponent implements OnInit {
	@ViewChildren('notification') private el:  QueryList<ElementRef>;
        this.showData= arrayData;

	ngAfterViewInit() {
		for (let i = 0; i < this.showData.length; i++){
		  this.on = this.showData[i].on;
		  this.duration = this.showData[i].duration;
		  if(this.on){  
			this.el.forEach((element)=>{      
			  const htmlElement = element.nativeElement as HTMLElement;
			  setTimeout(() => htmlElement.setAttribute("style", "display:none;"), this.duration);
			});
		  }
		}
	}
}

＆＃13;

这是我的HTML代码---＆gt;

＆＃13;

<div *ngFor="let n of showData">
  <div #notification class="show-top-bar" style="display: block;">
      {{n.message}}
  </div>
</div>

＆＃13;

Answer 1

它隐藏了所有div，因为你在evaluate.cpp之后放置了forEach，这意味着只需要 showData 数组中的一个项目 >设为真。

Answer 2

首先，你不应该自己处理DOM，这是框架的工作。如果你不使用框架，那么拥有一个框架有什么意义呢？

现在我不理解您的代码，因为您没有声明on类成员，并且您的代码是为了隐藏所有div。

所以我假设你的元素有条件，称为on，因为它似乎与你期望的最接近。

从HTML开始：

<div *ngFor="let n of showData">
  <div *ngIf="n.on" class="show-top-bar" style="display: block;">
      {{n.message}}
  </div>
</div>

首先将条件放在元素的on属性上。接下来，将所有值设置为true以显示所有值，并创建一个值数组以供稍后使用：

constructor() {
  this.referenceArray = this.showData.map(n => ({id: n.id, on: n.on}));
  for (let n of this.showData) {
    n.on = true;
  }
}

最后，在超时后将所有属性设置为其初始值：

ngAfterViewInit() {
  setTimeout(() => {
    for (let n of this.showData) {
      n.on = this.referenceArray.find(rn => rn.id === n.id).on;
    }
  });
}

几秒钟后显示和隐藏多个div 2 /打字稿

2 个答案: