如何在 HTML 中没有（单击）按钮的情况下执行打字稿 angular 功能？

Question

我正在尝试在页面打开时执行函数。我有打字稿代码：

export class MyReservationsPage implements OnInit {
  user: any;
  userId: string;
  storedData: any = [];

  constructor(private auth: AuthService, private afs: AngularFirestore) {}

  ngOnInit() {
    this.fetchBookings();
  }

  fetchBookings() {
    this.afs
      .collection('user')
      .doc(this.userId)
      .collection('BookingHistory')
      .get()
      .subscribe((querySnapshot) => {
        this.storedData = querySnapshot.docs.map((e) => {
          return {
            bookingDate: e.data()['Merge'],
          };
        });
      });
  }
}

和HTML：

<ion-content>
    <ion-grid>
        <row *ngFor="let data of storedData">
            <ion-col *ngFor="let value of data.bookingDate">
                <ion-row>{{value.Date}}</ion-row>
                <ion-row>{{value.Time}}</ion-row>
                <ion-row>{{value.BookedAt.toDate() | date:'medium'}}</ion-row>
            </ion-col>
        </row>
    </ion-grid>
</ion-content>

我真的不知道 ngOnInit 是如何工作的，但是如何在不单击按钮的情况下自动执行功能？

Answer 1

ngOnInit 并非每次都触发：

A callback method that is invoked immediately after the default change detector has checked the directive's data-bound properties for the first time, and before any of the view or content children have been checked. It is invoked only once when the directive is instantiated.

来源：Angular Docs

如果您想在每次加载视图时调用该函数，最好使用详述的 Ionic 生命周期事件 here。

所以在你的情况下，你可以使用类似的东西：

export class MyReservationsPage {
  user: any;
  userId: string;
  storedData: any = [];

  constructor(
    private auth: AuthService,
    private afs: AngularFirestore
  ) {}

  ionViewDidEnter() {
    this.fetchbookings();
  }

  fetchBookings() {
    this.afs
      .collection('user')
      .doc(this.userId)
      .collection('BookingHistory')
      .get()
      .subscribe((querySnapshot) => {
        this.storedData = querySnapshot.docs.map((e) => {
          return {
            bookingDate: e.data()['Merge'],
          };
        });
      });
  }
}

这将在视图加载后调用您的 fetchBookings() 方法。

如何在 HTML 中没有（单击）按钮的情况下执行打字稿 angular 功能？

How to execute typescript angular function without (click) button in HTML?

html

javascript

ionic-framework

angular