Question

我，我尝试用等待3秒改变ngStyle，这是我的片段：

＆＃13;

 public alertStyles=0;
  onSelectMenu(menu) {
console.log(menu.catego, "****");

setTimeout(function () {
  console.log("wait ***");
  this.alertStyles = { 
    'display': 'none',
  }
  
}, 3000);

＆＃13;

当我点击另一个菜单时我想要这个菜单si hidde等待3 seconde这是我的观点：

＆＃13;

<div [ngStyle]="cacheMenu" >
  un test
  <ul id="menuHorizon" class="showMenuFixed">
    <li class="item" *ngFor="let menu of categories,let i = index" (click)="selectMenuEvent($event)" role="navigation">
      <a (click)="onSelectMenu(menu)">{{menu.catego}}</a>
    </li>
    <li id="menuContact" class="item">
      <a (click)="bascule()"> Contactez-moi</a>
    </li>
  </ul>
</div>
<div id="titrePage">
  <div >
    <h1>{{titrePage}}</h1>
  </div>
</div>

＆＃13;

不是隐藏菜单，但是我有控制台日志显示等待***后3次借调。我用ngStyle我们可以做到吗？或者我们使用另一种解决方案？感谢回复

Answer 1

您必须在setTimeout回调中使用箭头功能。否则this将不会引用您的组件类。

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

@Component({
  selector: 'my-app',
  template: `
  <div [ngStyle]="style">Hello</div>
  `,
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  style = { color: 'red' };

  ngOnInit() {
    setTimeout(() => this.style = { color: 'blue' }, 3000);

    // this will not work
    // setTimeout(function () {
    //   this.style = { color: 'blue' };
    // }, 3000);

  }
}

Live demo

Answer 2

使用* ngIf模板可以做到这一点。

在typescript中绑定一个布尔变量，当布尔值为false时显示无样式的div，当它为真时显示样式的div。

将boolean typescript变量绑定到setTimeout回调

setTimeout(() => ..some code, 3000)

3000 = 3s

如果要在初始化时启动计时器，可以将它放在ngOnInit中。

我们可以等待ngStyle angular5

2 个答案: