使用ngFor在組件之間傳遞數據不適用於Angular14

Question

我正在做一個個人項目，我想記錄我一天中吃的每一餐，並使用圖表顯示它們。

我已經知道如何在父子之間使用Input()在組件之間傳遞數據，但是我的問題略有不同。 我提供代碼，然后解釋我的問題。

今天.component.html

<div *ngIf="loaded">
        <div *ngFor="let meal of mealList">
          <h1>{{ meal.name }}</h1>
          <app-chart
            [numCalories]="meal.calories"
            [numCarbs]="meal.carbs"
            [numFat]="meal.fat"
            [numProtein]="meal.protein"
          >
          </app-chart>
        </div>
      </div>

      <div *ngIf="!loaded" class="alert alert-info">
        Loading data...
      </div>

今天.component.ts

export class TodayComponent implements OnInit {
  mealList: Meal[] = [];
  loaded: boolean = false;

  constructor(private mealService: MealService, private router: Router, private toastr: ToastrService) { }

  ngOnInit(): void {
    this.getMeals();
  }
  
  getMeals() {
    this.mealService.getMeals().subscribe((meals) => {
      this.mealList = meals;
    });
    this.loaded = true;
  }   
 }

chart.component.html

<div>
  <div>
    <div style="display: block">
      <div>
        <canvas baseChart [data]="doughnutChartData" [type]="doughnutChartType">
        </canvas>
      </div>
    </div>
  </div>
</div>

圖表組件.ts

export class ChartComponent {
  @Input() numCalories!: number;
  @Input() numFat!: number;
  @Input() numCarbs!: number;
  @Input() numProtein!: number;

  constructor() {}

  public doughnutChartLabels: string[] = [
    'Calories',
    'Proteins',
    'Carbs',
    'Fat',
  ];
  public doughnutChartData: ChartData<'doughnut'> = {
    labels: this.doughnutChartLabels,
    datasets: [
      {
        data: [
          this.numCalories,
          this.numFat,
          this.numCarbs,
          this.numProtein,
        ],
      },
    ],
  };
  public doughnutChartType: ChartType = 'doughnut';
}

我知道數據加載正確，因為在今天組件的 HTML 布局中，我使用{{ meal.name }} ，我指的是你吃飯的時間，例如晚餐、午餐，它加載得很好，所以我的問題是將其他數據傳遞給圖表組件。

由於我正在分配要使用 NgFor 傳遞的數據，因此我在父組件中沒有該變量，這就是我所看到的每個示例中的制作方式，而且似乎我需要做其他事情，但是我真的不知道該怎么辦。

Answer 1

您必須在ngOnInit doughnutChartData

請記住，指令的數據綁定輸入屬性在構造之后才設置。

export class ChartComponent implements OnInit {
  @Input() numCalories!: number;
  @Input() numFat!: number;
  @Input() numCarbs!: number;
  @Input() numProtein!: number;

  public doughnutChartData: ChartData<'doughnut'> = null;
  public doughnutChartLabels: string[] = [
    'Calories',
    'Proteins',
    'Carbs',
    'Fat',
  ];
  public doughnutChartType: ChartType = 'doughnut';

  constructor() {}

  ngOnInit() {
    this.doughnutChartData = {
      labels: this.doughnutChartLabels,
      datasets: [
        {
          data: [
            this.numCalories,
            this.numFat,
            this.numCarbs,
            this.numProtein,
          ],
        },
      ],
    }
  }
}

或通過@penleychan 建議的單一類型的膳食輸入

export class ChartComponent implements OnInit {
  @Input() meal!: Meal;

  public doughnutChartData: ChartData<'doughnut'> = null;
  public doughnutChartLabels: string[] = [
    'Calories',
    'Proteins',
    'Carbs',
    'Fat',
  ];
  public doughnutChartType: ChartType = 'doughnut';

  constructor() {}

  ngOnInit() {
    this.doughnutChartData = {
      labels: this.doughnutChartLabels,
      datasets: [
        {
          data: [
            this.meal.numCalories,
            this.meal.numFat,
            this.meal.numCarbs,
            this.meal.numProtein,
          ],
        },
      ],
    }
  }
}