angular 在 firestore 事件上更改 css class
angular change css class on firestore event
我想在收到来自 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
经过长时间的研究,我终于解决了这个问题。 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
我想在收到来自 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
经过长时间的研究,我终于解决了这个问题。 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