Question

为什么这行不通？控制台不断给我输入错误；它无法读取属性排序。谁能帮我？ '''

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

您需要使用ngAfterViewInit生命周期钩子，因为Angular完全初始化了组件的视图之后便调用了它。

尝试这样：

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

Answer 2

您正在使用@Input()，因此OnInit的数据将不可用，因此您应该在OnChanges中进行操作

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

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

2 个答案: