Javascript 从阵列指定时，“角度选择”选项显示为空

我想在选择下拉列表中显示我的字符串数组。我尝试了正常的方法：

<form [formGroup]="emailForm" #form="ngForm" (ngSubmit)="sendEmail()" novalidate class="tooltip-center-bottom">
  <div class="form-group">
    <select id="emailTem" class="form-control" formControlName="emailTem" [(ngModel)]="emailTem">
      <option value="" disabled selected>Select Email Template</option>
      <option *ngFor="let obj of emailArray" [ngValue]="obj">{{obj}}</option>    
    </select>
    <div *ngIf="statusForm.get('status').errors?.required && form.submitted" class="invalid-tooltip">Status is required!</div>
  </div>
  <button class="btn btn-primary status-button" type="submit">Submit</button>
</form>

它在正常工作之前就开始工作了。但现在它没有显示空白

如果我尝试通过如下方式直接设置正常值：New它可以正常工作

即使不工作

请尝试使用

<form #form="ngForm" (ngSubmit)="sendEmail()" class="tooltip-center-bottom">
  <div class="form-group">
    <select id="emailTem" class="form-control" name="email" [(ngModel)]="emailTem">
      <option value="" disabled selected>Select Email Template</option>
      <option *ngFor="let obj of emailArray" [value]="obj">{{obj}}</option>    
    </select>
  </div>
  <button class="btn btn-primary status-button" type="submit">Submit</button>
</form>

.html文件

验证存在问题，因此请删除或注释该部分，它将正常工作

---

希望它能正常工作

您输入了一个拼写错误，无法获取“电子邮件”：

<div *ngIf="emailForm.get('email').errors?.required && form.submitted" class="invalid-tooltip">Status is
            required!</div>

应该是“emailTem”：

<div *ngIf="emailForm.get('emailTem').errors?.required && form.submitted" class="invalid-tooltip">Status is
            required!</div>

---

通过验证尝试此表单，并在提交时获取值-

app.component.html-

app.module.ts-

范例-

---

它不起作用。在使用formControlName和[ngModel]之前，我尝试过这一点。您正在尝试使用模板驱动和反应式表单。请删除[ngModel]。我不是前端开发人员，但我分配了从api检索的值。它在stackbliz上工作，但在我的计算机上不起作用。为什么要同时使用反应式表单和模板驱动表单？我想你可以去掉form=ngForm。请检查ts@oz1985oz上的console.log中的emailArray对象。我通常不作为前端开发人员工作，也不熟悉angular framework，但我读到它有助于分配从api检索到的值，formcontrol有助于我为控件设置验证程序。它是正确的。我刚刚用普通Stringif打印了，它们都是反应式表单和模板驱动表单。它们包含相同的信息/方法。主要的区别是模板驱动的表单主要是HTML，而反应式表单主要是ts。@oz1985oz它是否会影响我的选择选项，因为我以前使用过，而且效果很好。但是当我试图更新页面时。它停止工作了不，它不工作了，相同的输出只是空白options@Ashish好的，给我两分钟，这对我的工作很好device@Ashish删除所有[ngModel]内标记不工作请检查我添加的stackbliz，以便其他人可以参与，但这并不能解决我的问题。我的主要问题是它没有显示我的列表。你是否像上面那样更改了它，但它仍然不起作用？我在你的闪电战中发现的。在输入错误的情况下，控制台中出现了一个错误，从那时起一切都中断了

<div *ngIf="emailForm.get('email').errors?.required && form.submitted" class="invalid-tooltip">Status is
            required!</div>

<div *ngIf="emailForm.get('emailTem').errors?.required && form.submitted" class="invalid-tooltip">Status is
            required!</div>

<form [formGroup]="emailForm" (ngSubmit)="sendEmail()" novalidate class="tooltip-center-bottom">
    <div class="form-group">
        <select id="emailTem" class="form-control" formControlName="emailTem">
      <option value="" disabled selected>Select Email Template</option>
      <option *ngFor="let obj of emailArray" [value]="obj">{{obj}}</option>    
    </select>
        <br><br>
        <div *ngIf="formSubmit && emailTem.errors">
            <div class="text-danger" *ngIf="emailTem.errors.required">Status is required!</div>
        </div>
        <br>
    </div>
        <button class="btn btn-primary status-button" type="submit">Submit</button>
</form>

import { FormControl, FormGroup, FormsModule, ReactiveFormsModule, Validators } from "@angular/forms";

export class AppComponent {
    emailForm: FormGroup;
    formSubmit: boolean = false;
    emailArray: string[] = ["Call Not Connected", "Refund"];

    ngOnInit(): void {
        this.emailForm = new FormGroup({
          emailTem: new FormControl("", [Validators.required])
        });
    }

    sendEmail() {
        this.formSubmit = true;
        if(this.emailForm.valid){
            console.log(this.emailForm.value.emailTem); // selected value
        }
    }

    get emailTem() {
        return this.emailForm.get("emailTem");
    }
}

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { AppComponent } from './app.component';

@NgModule({
  imports:      [ BrowserModule, FormsModule, ReactiveFormsModule ],
  declarations: [ AppComponent ],
  bootstrap:    [ AppComponent ]
})
export class AppModule { }