Firestore事件上的角度更改css类答案

【问题标题】：angular change css class on firestore eventFirestore事件上的角度更改css类
【发布时间】：2021-04-15 11:29:11
【问题描述】：

我想在收到来自 firestore 的数据更新时更改 css 类。为此，我尝试了以下方法：

this.afs.collection('orders').doc(this.data.id).valueChanges().subscribe(dataset => {
  console.log(dataset.state);
  this.state = dataset.state;
  this.takeAway = dataset.takeaway;
});

这是我的html：

  <div class="progress dark">
<div class="right">
  <div [ngClass]="{'current': this.state === 'submitted'}">Übermittelt</div>
  <div [ngClass]="{'current': this.state === 'cooking'}">In Zubereitung</div>
  <div *ngIf="!takeAway" [ngClass]="{'current': this.state === 'delivery'}">In Zustellung</div>
  <div  *ngIf="takeAway" [ngClass]="{'current': this.state === 'ready'}">Bereit zur Abholung</div>
  <div class="done" [ngClass]="{'current': this.state === 'done'}">Gericht erhalten</div>
</div>

问题是如果我第一次调用我的组件，一切正常，但如果数据发生了变化，什么都不会发生。我defineteley接收数据所以错误是如何绑定动态类

【问题讨论】：

html 中不需要this.。之后，我将简单地打印状态以查看它的值 {{state}}。
你是对的，我的 html 中的值永远不会更新。你知道为什么吗？
我会检查你最先发布的sn-p，valueChanges().subscribe.... 执行了吗？如果是这样，你在dataset.state 里面有什么？
@DominikHartl 有什么进展吗？你解决了吗？
嗨 @FaridShumbar 是的，我解决了，我必须将依赖项添加到我的 podfile 中

标签： css angular google-cloud-firestore angularfire2

【解决方案1】：

经过长时间的研究，我能够解决这个问题。 Ionic 错过了向我的 Podfile 添加一个必需的依赖项。这是包含所有必需依赖项和导入的最终 podfile：

platform :ios, '11.0'
use_frameworks!
install! 'cocoapods', :disable_input_output_paths => true

def capacitor_pods
  # Automatic Capacitor Pod dependencies, do not delete
   pod 'Capacitor', :path => '../../node_modules/@capacitor/ios'
   pod 'CapacitorCordova', :path => '../../node_modules/@capacitor/ios'
   pod 'CordovaPlugins', :path => '../capacitor-cordova-ios-plugins'
   pod 'CordovaPluginsResources', :path => '../capacitor-cordova-ios-plugins'
  # Do not delete
 end

 target 'App' do
 capacitor_pods
 # Add your Pods here

  end

【讨论】：