如何在Angular中显示数据？

Question

我在Ionic 4中有一个香烟计数器应用程序。当用户单击“计数器”部分中的“添加一个”按钮时，计数器数据被推送到存储中。我需要从存储中检索数据并将其显示在“历史”段的表中。我无法使用以下代码来显示数据：

this.service.getConsumptions().then((data: consumption[]) => {
            this.histories = data;
            console.log(data);
          })

home.page.html：

   <ion-header>
      <ion-toolbar>
        <ion-segment [(ngModel)]="segment" color="dark">
          <ion-segment-button value="counter">
            Counter
          </ion-segment-button>
          <ion-segment-button value="history">
            History
          </ion-segment-button>
        </ion-segment>
      </ion-toolbar>
    </ion-header>

    <ion-content padding>

      <div *ngIf="segment == 'counter'">
        <h1 class="keski">Consumption today</h1>
        <p class="keski">{{ today.date }}</p>
        <p class="keski">{{ today.consumption }}</p>
        <p class="keski">{{ today.last_smoked }}</p>
        <ion-button expand="block" color="dark" (click)="addOne()">Add one</ion-button>
      </div>

      <div *ngIf="segment == 'history'">
        <h1 class="keski">Recent consumption</h1>
        <ion-grid>
          <ion-row>
            <ion-col><b>Date</b></ion-col>
            <ion-col><b>Consumption</b></ion-col>
          </ion-row>
          <ion-row *ngFor="let history of histories">
            <ion-col>{{ history.date }}</ion-col>
            <ion-col>{{ history.consumption }}</ion-col>
          </ion-row>
        </ion-grid>
      </div>

    </ion-content>

consumption.interface.ts：

export interface consumption {
    date: string,
    consumption: number,
    last_smoked: string
}

home.page.ts：

    import { Component } from '@angular/core';
    import { consumption } from '../consumption.interface';
    import { KulutusService } from '../kulutus.service';

    @Component({
      selector: 'app-home',
      templateUrl: 'home.page.html',
      styleUrls: ['home.page.scss'],
    })

    export class HomePage {

      constructor(private service: KulutusService) { }

      segment: any = "counter";
      today = {} as consumption;
      histories: consumption[] = [];

      ngOnInit() {

        this.service.getConsumptions().then((data: consumption[]) => {
          if (data == null) {
            this.today.consumption = 0;
            this.today.date = new Date().toLocaleDateString();
            this.today.last_smoked = new Date().toLocaleTimeString();
          } else {
            for (let consumption of data) {
              if (consumption.date == new Date().toLocaleDateString()) {
                this.today = consumption;
              }
            }
          }

          this.service.getConsumptions().then((data: consumption[]) => {
            this.histories = data;
            console.log(data);
          })
        })

      }

      addOne = () => {
        this.today.date = new Date().toLocaleDateString();
        this.today.consumption += 1;
        this.today.last_smoked = new Date().toLocaleTimeString();

        this.service.getConsumptions().then((data: consumption[]) => {
          let consumptions = data;
          // there is at least one consumption
          if (consumptions != null) {
            let current_exists = false;
            for (let consumption of consumptions) {
              // use current date
              if (consumption.date == this.today.date) {
                current_exists = true;
                consumption.date = this.today.date;
                consumption.consumption = this.today.consumption;
                consumption.last_smoked = this.today.last_smoked;

                // add current consumption to history
                for (let history of this.histories) {
                  if (history.date == this.today.date) {
                    history.date = this.today.date;
                    history.consumption = this.today.consumption;
                    history.last_smoked = this.today.last_smoked;
                  }
                }

              }
            }
            // new date
            if (current_exists == false) {
              consumptions.push(this.today);
              this.histories.push(this.today);
            }
            this.service.saveConsumption(consumptions);
          } else {
            // no consumptions at all
            this.service.addConsumption(this.today);
            this.histories = data;
          }
        })
      }

    }

consumption.service.ts：

    import { Injectable } from '@angular/core';
    import { Storage } from '@ionic/storage';
    import { consumption } from '../app/consumption.interface';

    @Injectable({
      providedIn: 'root'
    })

    export class KulutusService {

      constructor(private storage: Storage) { }

      getConsumptions = () => {
        return new Promise((resolve, reject) => {
          this.storage.get("consumption").then((consumptions) => {
            resolve(consumptions);
          })
        })
      }

      addConsumption = (newConsumption: consumption) => {
        this.storage.get("kulutus").then((data: consumption[]) => {
          let kulutukset = data;
          let loytyy_nykyinen = false;
          if (kulutukset == null) {
            kulutukset = [{date: new Date().toLocaleDateString(), 
              consumption: 0, last_smoked: new Date().toLocaleTimeString()},
            ]
          }
          for (let kulutus of kulutukset) {
            // use current date
            if (kulutus.date == newConsumption.date) {
              loytyy_nykyinen = true;
              kulutus.date = newConsumption.date;
              kulutus.consumption = newConsumption.consumption;
              kulutus.last_smoked = newConsumption.last_smoked;
            }
          }
          // new date
          if (loytyy_nykyinen == false) {
            kulutukset.push(newConsumption);
          }
          this.storage.set("kulutus", kulutukset);
        }
        )}

        saveConsumption = (kulutukset: consumption[]) => {
          this.storage.set("kulutus", kulutukset);
        }

    }

Answer 1

这里的问题是，在提供的代码中，您没有在sortedComments.map(comment => "<li>" + comment.body + "</li>"); 点击功能上设置this.segment = “history”;

忘记了还是在其他地方？

请检查。

Answer 2

我已经在本地验证了您的代码。只有缺少的部分是

this.segment = "history";

在addOne()函数中。

休息很好。请参阅下面的证明。