为什么 OnInit 生命周期挂钩不起作用？

Question

Why doesn't this work?? The console keeps giving me a type error; It can't read property sort. Can anyone help me? '''

import { Component, OnInit, Input } from '@angular/core';
import { Order } from 'src/app/models/order';

@Component({
  selector: 'app-table',
  templateUrl: './table.component.html',
  styleUrls: ['./table.component.css']
})
export class TableComponent implements OnInit {

  @Input() orders: Order[];

  sortedOrders: Order[];

  constructor() { }

  ngOnInit(): void {
    this.sortedOrders = this.sortOrders(this.orders);
    console.log(this.sortedOrders);
  }

  sortOrders(orders: Order[]): Order[] {
    return orders.sort((a, b) => a.personName.localeCompare(b.personName));
  }

}

Answer 1

You need to use ngAfterViewInit lifecycle hook as it is called after Angular has fully initialized a component's view

Try like this:

  ngAfterViewInit(): void {
    this.sortedOrders = this.sortOrders(this.orders);
    console.log(this.sortedOrders);
  }

Answer 2

You're using @Input() , so OnInit your data will not be available, so you should be doing it in OnChanges

ngOnChanges(): void {
    this.sortedOrders = this.sortOrders(this.orders);
    console.log(this.sortedOrders);
  }