angular 在 firestore 事件上更改 css class

Question

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

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 接收数据所以错误是如何绑定动态 class

Answer 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

angular 在 firestore 事件上更改 css class

angular change css class on firestore event

css

angular

google-cloud-firestore

angularfire2