Angular 视图未在值更改时更新

我有一个离子组件按钮，我只想在播放音频时显示

停止音频

我有一个服务，它公开了一个公共属性，当音频播放时它是真的，当它不播放时它是假的

public playing=新行为主体（false）

播放音频时，按钮会正确显示，但当音频停止播放时，按钮会保留，除非我单击其他按钮以更改视图状态

---

我知道BehaviorSubject工作正常，因为当我订阅BehaviorSubject并在控制台记录输出时，它会在播放音频（视图更新）时记录

true

，在音频停止（视图不更新）时记录

false

。

您需要使用异步管道：

---

*ngif=“audioPlayingService.playing | async”

因此，有两种方法可以在组件中实现这一点。一种是在组件上添加属性，然后将值提取到其中。所以你可以这样做：

组件类

export class MyComponent implements OnInit {
  playing: boolean = false;

  constructor(private audioService: AudioService) {}

  ngOnInit(): void {
    this.audioService.playing.subscribe(playing => this.playing = playing);
  }

}

export class MyComponent implements OnInit {
  playing: Observable<boolean>;

  constructor(private audioService: AudioService) {}

  ngOnInit(): void {
    this.playing = this.audioService.playing;
  }

}

组件模板

<button *ngIf="playing">Stop Audio</button>

<button *ngIf="(playing | async)">Stop Audio</button>

停止音频

另一个解决方案是使用异步管道，就像Ploppy建议的那样。然后您可以执行以下操作：

组件类

export class MyComponent implements OnInit {
  playing: boolean = false;

  constructor(private audioService: AudioService) {}

  ngOnInit(): void {
    this.audioService.playing.subscribe(playing => this.playing = playing);
  }

}

export class MyComponent implements OnInit {
  playing: Observable<boolean>;

  constructor(private audioService: AudioService) {}

  ngOnInit(): void {
    this.playing = this.audioService.playing;
  }

}

导出类MyComponent实现OnInit{
播放：可观察；
构造器（专用音频服务：音频服务）{}
ngOnInit（）：void{
this.playing=this.audioService.playing；
}
}

组件模板

<button *ngIf="playing">Stop Audio</button>

<button *ngIf="(playing | async)">Stop Audio</button>

停止音频

您的模板代码是指*ngIf=“audioService.playing”，中的属性名称为“playing”。我试图理解音频服务在这里的作用。我猜你在服务中有这个扮演变量，你在组件中有一个依赖项，在这种情况下，你不能在模板中直接使用它，而不将它的值暴露给组件中的变量。对不起，这是一个输入错误。我会编辑的。没错，

audioPlayingService。playing

是服务的一个属性，它是我的组件中的一个依赖项。模板引用组件中的一个变量，该变量是从对服务的订阅更新而来的

this.audioPlayingService.playing.subscribe（x=>{this.playing=x}）