Ссылочное перечисление Angular2 в массиве в интерфейсе

Question

Я должен изменить следующий код, который состоит из интерфейса Cat, который содержит несколько string s, Array s и number s, каждый из которых имеет различные типы.Вот мое определение Cat` в файле ts

export interface Cat {
  photos: string[];
  cost: number;
  breed: Breed;
  description: string;
  location: Location[];
  adoptionAgency: Agency;
  kittens: Kitten[];
}

Меня интересует элемент breed (в котором хранится перечисление) в массиве Kitten, который определяется как таковой

export interface Kitten {
  breed: KittenBreed;
  age: number;
  name: string;
  description: string;
}

и вот определение KittenBreed, которое является перечислением:

export enum KittenBreed {
  Persian,
  Siamese,
  Calico,
  Ragdoll,
  Shorthair
}

Я хочу иметь возможность выводить информацию только о кошке, если KittenBreedPersian, Siamese или Shorthair.Я знаю, что должен использовать ngIf, но я не уверен, что я использую его правильно, и при этом я не уверен, правильно ли я ссылаюсь на перечисление KittenBreed.

<div *ngIf="{{cat.kitten.breed.KittenBreed}} == "Persian" || {{cat.kitten.breed.KittenBreed}} == "Siamese" || ""cat.kitten.breed.KittenBreed}} == "Shorthair" ">
  <p>success!</p>
</div>

Пожалуйста, дайте мнеЯ знаю, нужна ли какая-либо дополнительная информация.Спасибо.

Answer 1

Вы можете использовать enum для проверки входящего значения, объявив его, как указано выше.

enum KittenBreed {
  Persian = 'Persian',
  Siamese = 'Siamese',
  Calico = 'Calico',
  Ragdoll = 'Ragdoll',
  Shorthair = 'Shorthair'
}

Тогда вам нужно просто использовать object.key и indexof.

public existKittenBreed(item: string): boolean {
    return Object.keys(KittenBreed).indexOf(<any>item) > -1;
}

пример

Answer 2

Поскольку Kitten является массивом, я предполагаю, что где-то вы используете *ngFor на kittens и присваиваете его как cat

Вам не нужно использовать cat.kitten.breed.KittenBreed там.Вместо этого используйте cat.kitten.breed, который имеет действительное значение KittenBreed.

Вам также не нужно интерполировать свойства, используя {{ }}

Я добавляю ()для удобства чтения.

Кроме того, в вашем интерфейсе присвойте им значения, или они будут инициализированы числами.

export enum KittenBreed {
  Persian = 'Persian',
  Siamese = 'Siamese',
  Calico = 'Calico',
  Ragdoll = 'Ragdoll',
  Shorthair = 'Shorthair'
}

Затем в классе компонентов выполните:

создайте свойство с именем KittenBreed и присвойте ему значение KittenBreed, которое является вашим интерфейсом.

KittenBreed = KittenBreed;

Тогда правильный синтаксис должен быть

<div *ngIf="(cat.kitten.breed === KittenBreed.Persian) || (cat.kitten.breed === KittenBreed.Siamese) || (cat.kitten.breed === KittenBreed.Shorthair)">
  <p> success! </p>
</div>