1

I am to modify the following code which consists of an interface Cat that contains multiple strings, Arrays, and numbers, all of which are of various types. Here is my definition of Cat` in the ts file

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

What I am concerned with is the breed element (which stores an enum) in the Kitten array, which is defined as such

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

and here is the definition of the KittenBreed, which is an enum:

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

I want to be able to output info on a cat ONLY if the KittenBreed is Persian, Siamese, or Shorthair. I know I should use ngIf, but I'm not sure I'm using it correctly, nor am I sure if I'm even referencing the KittenBreed enum correctly.

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

Please let me know if any more information is needed. Thank you.

Improve this question

2 Answers 2

Reset to default
1

Since Kitten is an Array, I'm assuming that somewhere you're using *ngFor on kittens and assigning it as cat

You don't need to use cat.kitten.breed.KittenBreed there. Instead, use cat.kitten.breed which has the actual value of the KittenBreed.

You also don't need to interpolate the properties using {{ }}

I'm adding () for readability's sake.

Also, in your interface, assign values to them or they'll get initialized to numbers.

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

Then in your Component Class, do:

create a property named KittenBreed and assign it the value of KittenBreed which is your interface.

KittenBreed = KittenBreed;

The correct syntax should then be

<div *ngIf="(cat.kitten.breed === KittenBreed.Persian) || (cat.kitten.breed === KittenBreed.Siamese) || (cat.kitten.breed === KittenBreed.Shorthair)">
  <p> success! </p>
</div>
Improve this answer
Sign up to request clarification or add additional context in comments.

12 Comments

I prefer to use the enum in the template. As long as you add it as a local property in the class. e.g. ...*ngIf="(cat.kitten.breed === KittenBreed.Persian) ...;
you just need to assign it as a local var in your component.ts file; e.g. @Component(...) export class ClassName { KittenBreed = KittenBreed; ...}
@joshvito, thanks for your inputs. I've updated my answer. :)
If you do the compare with the enum like I suggested, you don't need to assign string values to the enum members.
@joshvito - It would have been simpler to post your own answer. :-)
|
1

You can use the enum to validate the incoming value declaring it like above.

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

Then you just to use object.key and indexof.

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

example

Improve this answer

1 Comment

This what I was talking about, great example bro.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.