Angular получить значение выбранного варианта

Question

У меня есть следующий выбор в моем html, и я хотел бы получить атрибут значения. В настоящее время метод использует текстовый контекст. Как мне получить доступ к значению параметра?

Это выбор

<form [formGroup]="angForm"  class="form-inline my-5 my-lg-0">
    <div class="post-emojy">
        <select #emoji class="textboxclass" type="text" placeholder="Emojy" aria-label="Post" formControlName="emoji" required>
            <option value="" disabled selected>?</option>
            <option value="angry" style="background-image:url(./src/assets/emoticons/png/angry.png);">angry</option>
            <option value="bored" style="background-image:url(~assets/emoticons/png/bored.png);">bored</option>
            <option value="confused" style="background-image:url(~assets/emoticons/png/confused.png);">confused</option>
            <option value="embarrassed" style="background-image:url(~assets/emoticons/png/embarrassed.png);">embarrassed</option>
            <option value="happy" style="background-image:url(~assets/emoticons/png/happy.png);">happy</option>
            <option value="kissing" style="background-image:url(~assets/emoticons/png/kissing.png);">kissing</option>
            <option value="unhappy" style="background-image:url(~assets/emoticons/png/unhappy.png);">unhappy</option>
            <option value="sad">sad</option>
        </select>
    </div>
</form>

И это метод, который потребляет значение

 angForm: FormGroup;

 constructor(
   private postService: PostServiceService,
   private fb: FormBuilder
 ) {
   this.createForm();
 }

 postMood(): void {
   const emoji = this.angForm.get("emoji").value;
   const text = this.angForm.get("postText").value;
   this.postService.postMoods(emoji, text);
   // Call to reset the form values
   this.angForm.get("postText").reset();

   function delay(ms: number) {
     return new Promise((resolve) => setTimeout(resolve, ms));
   }

   (async () => {
     await delay(300);
     location.reload();
   })();
 }

Answer 1

Я предпочитаю хранить информацию о параметрах в массиве и l oop через него.

this.emojis = [
  {
    displayValue: 'Angry',
    value: 'angry',
    src: './src/assets/emoticons/png/angry.png'
  },
  {
    displayValue: 'Bored',
    value: 'bored',
    src: '~assets/emoticons/png/bored.png'
  },
  ...
]

this.angForm = this.fb.group({
    emoji:  [null, [ Validators.required ] ]
}); 

<select multiple formControlName="emoji">
  <option [ngValue]="null" disabled>Choose your emoji</option>
  <option *ngFor="let emoji of emojis" [style.backgroundImage]="'url(` + emoji.src + ')'" [ngValue]="emoji.value">
   {{ emoji.displayValue }}
  </option>
</select> 

Но если вы действительно хотите получить текстовое содержимое узла, вам придется использовать ViewChild

Не рекомендуется

<option #emojiRefs *ngFor="let emoji of emojis" [style.backgroundImage]="'url(` + emoji.src + ')'" [ngValue]="emoji.value">

@ViewChildren("emojiRefs") private emojiRefs: QueryList<ElementRef<HTMLOptionElement>>;

this.emojiRefs.toArray()[0].textContent