点击操作(更新标签)后刷新NativeScript(角度)标签文本

Question

我在NativeScript应用程序中有一个表示状态的标签列表。我有一个方法可以在点击后更改每个标签的状态。点击标签后，它应该会更改状态值(数字(，并在点击后立即在屏幕上显示新值。

我所做的只是部分工作。我必须点击两次才能看到标签的更改，或者点击一次并拖动以刷新才能看到标签更改。此外，点击后，服务中的更新也按预期进行。有什么想法可以正确地实施这种行为吗？

视图：父组件：

<StackLayout *ngFor="let phase of (training$ | async)?.phases; let i = index">
<StackLayout *ngIf="(training$ | async)?.phases">
<StackLayout>
<ns-phase-item [phase]="phase" [training$]="training$" [i]="i"></ns-phase-item>
</StackLayout>
</StackLayout>
</StackLayout> 

第一个子项(ns阶段项(：

<StackLayout>
<Label [text]="phase.phaseTitle" [textWrap]="true" class="title-wrap"></Label>
<StackLayout *ngFor="let unit of (training$ | async).phases[i].units">
<ns-unit-item [unit]="unit" class="unit"></ns-unit-item>
</StackLayout>
</StackLayout>

第一个子视图的子视图(ns单元项((我称之为更新方法(：

<StackLayout [ngClass]="{ 'unit-completed': unit.status === 1, 'unit-not-completed': unit.status !== 1 }">
<GridLayout columns="4*, *" rows="auto">
<FlexboxLayout col="0" flexDirection="row" (tap)="onView(unit._id)">
<Label [text]="(unit.date | date: 'd. MMM') + ' - ' + unit.unitTitle"></Label>
<Label *ngIf="unit.duration || unit.distance" text=" ("></Label>
<Label *ngIf="unit.duration" [text]="' ' + unit.duration + ' min'"></Label>
<Label *ngIf="unit.duration && unit.distance" text=" / "></Label>
<Label *ngIf="unit.distance" [text]="unit.distance + ' km'"></Label>
<Label *ngIf="unit.duration || unit.distance" text=")"></Label>
<Label *ngIf="unit$" [text]="(unit$ | async).status"></Label>
</FlexboxLayout>
<StackLayout col="1">
<StackLayout *ngIf="(unit$ | async).status == 1">
// HERE I CALL UPDATE - it should change the value and icon after tap
<Image src="res://check" height="20" stretch="aspectFit" (tap)="onStatusUpdate(0)"></Image>
</StackLayout>
<StackLayout *ngIf="(unit$ | async).status == 0">
<Image src="res://checkgray" height="20" stretch="aspectFit" (tap)="onStatusUpdate(1)"></Image>
</StackLayout>
</StackLayout>
</GridLayout>
</StackLayout>

第一个子控制器的子控制器(ns单元项组件(

private _unit: BehaviorSubject<Unit> = new BehaviorSubject<Unit>(null)

getUnitObservable(): Observable<Unit> {
return this._unit.asObservable()
}
getUnitValue(): Unit {
return this._unit.getValue()
}
unitChanged(unit: Unit) {
this._unit.next(unit)
}
ngOnInit(): void {
this.unitChanged(this.unit)
this.unit = this.getUnitValue()
this.unit$ = this.getUnitObservable()
}
onStatusUpdate(status: number) {
this.trainingService.updateTrainingUnitStatus(this.unit._id, status).subscribe((unit) => {
this.unitChanged(unit)
this.unit$ = this.getUnitObservable()
})
}

我呼叫API 的服务

updateTrainingUnitStatus(id: string, status: number) {
return this.http.post<Unit>(`${this.API_URL_UNITS}/${id}/status`, { status: status })
}

Answer 1

我使用RxJS BehaviorSubject来实现这一点。我简化了解决方案，并使用了BehaviorSubject，只使用数字而不使用完整对象。

服务中：

public unitStatus: BehaviorSubject<Number> = new BehaviorSubject<Number>(0)

在调用API进行更新之前，我在BehaviorSubject 上调用下一个

onStatusUpdate(status: number) {
console.log(status)
this.trainingService.unitStatus.next(status)
this.subscription = this.trainingService
.updateTrainingUnitStatus(this.unitId, status)
.pipe(tap((data) => console.log(data.status)))
.subscribe(() => {
this.status$ = this.trainingService.unitStatus.asObservable()
this.status = this.trainingService.unitStatus.getValue()
console.log(this.status)
})
}

在我看来；"状态"；点击按钮后发生变化的属性(与DB中的持久数据一致(

<FlexboxLayout margin="0" padding="0">
<Button
*ngIf="status === 0"
text="MARK AS DONE"
(tap)="onStatusUpdate(1)"
class="-rounded -primary"
></Button>
<Button
*ngIf="status === 1"
text="MARK AS NOT DONE"
(tap)="onStatusUpdate(0)"
class="-rounded -primary"
></Button>
</FlexboxLayout>