Угловое условие от объекта Mock Array

Question

Я не уверен, как получить объект массива и передать его в условное выражение (если я ошибаюсь, не стесняйтесь редактировать заголовок и вопрос:).

Это то, чем я являюсьпопытки;См. calculateClasses() ниже:

В компоненте:

import { Component, OnInit } from '@angular/core'; import { AIRFRAMES } from './mock-airframe-list'

@Component({
  selector: 'app-airframe-list',
  templateUrl: './airframe-list.component.html',
  styleUrls: ['./airframe-list.component.scss']
}}

export class AirframeListComponent implements OnInit {

  fabIcon = 'plus';
  fabLink = '/inventory/add-airframe';

  airframes = AIRFRAMES;

     calculateClasses() {
       if(airframe.airframeStatus === 'airworthy') {
         return {
           'green': true
       } else if (...){. . .};
    }
  }

  ngOnInit() {}
}

В списке макетов планера данных:

import { Airframe } from '@app/modules/inventory/airframes/pages/airframe-list/airframe';

export const AIRFRAMES: Airframe[] = [
  {
    airframeStatus: 'airworthy'
  },
  {
    airframeStatus: 'maintenance'
  },
  {
    airframeStatus: 'unairworthy'
  },
];

В классе планера:

export class Airframe {
  airframeName: string;
  airframeModel: string;
  airframeHours: number;
  airframeFlights: number;
  airframeType: string;
  airframeSN: string;
  airframeStatus: string;
}

... и

<button
  mat-mini-fab
  [ngClass]="calculateClasses()" >
  <fa-icon
    icon="plane-departure"
    class="airframe-card-fab-icon" >
  </fa-icon>
</button>

Любая помощь в обучении меняздесь с благодарностью.

Answer 1

Еще более простой способ:

    <ng-container *ngFor="let airframe of airframes">
      . . .
      <button
        mat-mini-fab
        [ngClass]="{
          'green': airframe.airframeStatus === 'airworthy',
          'yellow': airframe.airframeStatus === 'maintenance',
          'red': airframe.airframeStatus === 'unairworthy'
        }" >
        <fa-icon
          icon="plane-departure"
          class="airframe-card-fab-icon" >
        </fa-icon>
      </button>
      . . .
    <ng-container>

Answer 2

calculateClasses(airframe) {
  return {
    'airplane': true,
    'green': airframe.airframeStatus === 'airworthy',
    'yellow: airframe.airframeStatus === 'maintenance',
    'red': airframe.airframeStatus === 'unairworthy'
  }
}

Я думаю, что вы делаете это сложнее, чем нужно.Директива [ngClass] уже оценивает объект, переданный в нее, основываясь на правдивости выражения.Поэтому убедитесь, что вы передаете объект из массива в метод, чтобы у него был доступ к свойствам, которые вы хотите проверить, как показано ниже.

<ng-container *ngFor="let frame of airframes">
  <button
    mat-mini-fab
    [ngClass]="calculateClasses(frame)" >
    <fa-icon
      icon="plane-departure"
      class="airframe-card-fab-icon" >
    </fa-icon>
  </button>
</ng-container>

Конечный результат будет выглядеть примерно так: первый планер вашегоМассив будет возвращать список классов "самолет зеленый", второй будет "самолет желтый" и, наконец, "самолет красный".