Question

我要修改以下代码，该代码由接口Cat组成，该接口包含多个string，Array和number，所有这些都属于各种类型。这是我在ts文件中对Cat`的定义

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
}

仅当KittenBreed是Persian，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

由于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>

Answer 2

您可以使用枚举来验证传入值，像上面那样声明它。

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;
}

example

接口中数组中的Angular2参考枚举

2 个答案: