时间戳

首页 > 解决方案 > 使用 Ionic 和 Angular 执行单击/点击事件时 DOM 未更新

angular - 使用 Ionic 和 Angular 执行单击/点击事件时 DOM 未更新

问题描述

我正在使用该指令*ngFor将 ionic-card 组件从名为userData. 该userData数组由具有 id、title 和 count 属性的嵌套对象组成。

我正在尝试创建一个点击/点击事件，每当用户点击卡片时，计数就会增加被点击的特定卡片。

我遇到的问题是*ngFor当我点击卡片时没有更新。但是当我只引用 *ngFor 指令之外的计数时，它确实有效。

*ngFor当我单击它们时，我想使用该指令并单独更新每张卡片。任何帮助深表感谢。

Tally 组件 HTML 模板粘贴

<ion-card class="ion-card-custom" (click)="increaseCount()" *ngFor="let tal of userData">
       <ion-item>
           <ion-icon name="pin" slot="start" ></ion-icon>
           <ion-label>{{ tal.title }}</ion-label>
           <section class="tally-info-count" >{{ tal.count }} </section>
           <section class="tally-info-count" >{{ tap }} </section>
           <ion-button fill="outline" slot="end" class="info-button"> i </ion-button>
       </ion-item>
       <ion-item>
           <ion-label>{{ tal.created }} </ion-label>
           <p (click)="increaseCount()">{{ plus }} </p>
       </ion-item>
</ion-card>

<ion-card (tap)="tapEvent($event)">
    <ion-item>
      Tapped: {{tap}} times
    </ion-item>
  </ion-card>

完整的 Tally 组件粘贴

import { getLocaleDateTimeFormat } from '@angular/common';

//decorator
@Component({
    selector: 'app-tally',
    templateUrl: 'tally.html',
    styleUrls: ['tally.scss'],
  })

  export class Tally implements OnInit {
    title: string;
   public count: number = 0; 
   public tap: number = 0;
    plus: number; 
    userData: any[];
    id: number;
    //date created
    dateTime: Date = new Date();
    created: string = `${this.dateTime.getUTCMonth() +1}/${this.dateTime.getDay}/${this.dateTime.getUTCFullYear()}`

    constructor() { this.plus = 0;}

    ngOnInit() {
        this.title = "Title";
        this.userData = [
            {
                id: this.id,
                title: this.title,
                count: this.tap,
                created: this.created
            },
            {
                id: this.id,
                title: this.title,
                count: this.count,
                created: this.created
            }
        ]

    }

    increaseCount () {
        this.count += 1;
        this.plus += 1;
        console.log('this.count:', this.count);
    }

    tapEvent(e) {
        console.log(e);
        this.tap++;
      }
  }

标签： angularionic-frameworkionic4angular8

解决方案

我在您的代码中发现了两个谬误：

  1. 在increaseCount()和tapEvent()你分别增加this.count和this.tap。但this在这种情况下是指Component而不是特定的用户/卡。因此，模板中所有{{ tap }}卡片的值都相同，这就是为什么您的计数器“不会单独更新”的原因。

  2. 你初始化userData：

this.userData = [
    {
        id: this.id,
        title: this.title,
        count: this.tap,
        created: this.created
    },
    {
        id: this.id,
        title: this.title,
        count: this.count,
        created: this.created
    }
]

它分别用和的值初始化count属性，即 0。this.tapthis.count

但这不会将属性值绑定到this.tapor this.count，即更改increaseCount()or中的值tapEvent()不会影响项目的count属性userData。

这就是为什么“*ngFor当[您]点击卡片时没有更新”。

为了在此处获得预期的行为，您需要在循环中传递当前 tal实例，如下所示：*ngForincreaseCount()

<ion-card class="ion-card-custom" (click)="increaseCount(tal)" *ngFor="let tal of userData">
       ...
</ion-card>

而不是增加this.count你Component需要增加count传递对象的属性：

increaseCount(tal) {
    tal.count++;
}

除了传递对象，您还可以使用@Derek建议的索引。

推荐阅读