Question

我在html中进行了以下选择，我想获取value属性。当前，该方法正在使用文本竞争。如何访问该选项的值？

这是选择

<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

我更喜欢将与选项相关的信息存储在数组中并循环遍历。

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

角度获取选择选项的价值

1 个答案: