0

我在 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-phase-item）：

<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-unit-item）（我称之为更新方法）：

<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-unit-item 组件）

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 })
}
4

0 回答 0