时间戳

首页 > 解决方案 > 下拉列表不显示名称值

html - 下拉列表不显示名称值

问题描述

我正在尝试使用 Angular 的下拉列表显示名称列表以供选择。这显然是一个下拉列表，但我的数组中的名称没有显示出来。我觉得这可能是一个小修复，我只是想念它，我对 Angular 比较陌生，请帮忙！

这是html页面

这是ts页面

HTML页面///

<div class="container">
  <div [hidden]="submitted">
    <h1>Student Form</h1>
    <form (ngSubmit)="onSubmit()" #StudentForm="ngForm">
      <div class="form-group">
        <label for="name">Course Name</label>
        <input type="text" class="form-control" id="Coursename"
               required
               [(ngModel)]="model.Coursename" name="Coursename"
               #inputname="ngModel"  required required minlength= "10" maxlength="50">
        <div *ngIf="Coursename.invalid && (inputCourseName.dirty || inputCoursename.touched)"
             class="alert alert-danger">
          Course Name is required
        </div>
      </div>

      <div class="form-group">
        <label for="CourseScore">Course Score</label>
        <input type="text" class="form-control" id="CourseScore"
               [(ngModel)]="model.score" name="CourseScore">
      </div>

      <div class="form-group">
        <label for="Studentname">Student Name</label>
        <select class="form-control" id="Studentname"
                required
                [(ngModel)]="model.name" name="Studentname"
                #name="ngModel">
          <option *ngFor="let name of names" [value]="name">{{name}}</option>
        </select>
        <div *ngIf="Studentname.invalid || Studentname.pristine" class="alert alert-danger">
          Student Name is required
        </div>
      </div>

      <button type="submit" class="btn btn-success" [disabled]="!StudentForm.form.valid">Submit</button>
      <button type="button" class="btn btn-default" (click)="newStudent(); StudentForm.reset()">Clear</button>
      <i>with</i> reset

      &nbsp;&nbsp;
      <button type="button" class="btn btn-default" (click)="newStudent()">New Student</button>
      <i>without</i> reset

.ts 页面///

import { Component, OnInit } from '@angular/core';
import { Student } from '../shared/student';
import { Router } from '@angular/router';

@Component({
  selector: 'app-student-form',
  templateUrl: './student-form.component.html',
  styleUrls: ['./student-form.component.css']
})
export class StudentFormComponent implements OnInit {

  Student: StudentFormComponent
  names = ['Amritha Nair', 'Sarah Smith',
  'Paul Hughman', 'Isabelle Simpkins', 'Sabrina Raj'];

  model = new Student();

  submitted = false;

  onSubmit() { this.submitted = true; }

  get diagnostic() { return JSON.stringify(this.model); }

  constructor(private router: Router) { }

  ngOnInit(): void {
    this.model=new Student();
  }

  cancel(): void {
    this.router.navigateByUrl('home');
  }

}

标签： htmlangulartypescript

解决方案

控制台中有一个明显的错误应该可以帮助您。

将参考名称更改#studentName为#name

<select class="form-control" id="Studentname"
                required
                [(ngModel)]="model.name" name="Studentname"
                #Studentname="ngModel">
 <option *ngFor="let name of names" [value]="name">{{name}}</option>
</select>

演示

推荐阅读