Angular DropDown - 无法在视图上显示值答案

【问题标题】：Angular DropDown - Unable to display value on ViewAngular DropDown - 无法在视图上显示值
【发布时间】：2021-01-27 04:36:58
【问题描述】：

在我的组件中，我需要在 Angular 表单上显示为下拉列表的 2 个字符串，我正在努力获取 HTML 页面上的值

演示 - https://stackblitz.com/edit/angular-dc4s7d?file=src%2Fapp%2Fapp.component.ts

这是我的 ts 代码

export class EmployeeComponent implements OnInit {
  constructor(public employeeService: EmployeeService) {}
  public listItem: string[];
  ngOnInit() {
    this.listItem = ["A", "B"];  ----->>>>> Dropdown values
  }

HTML代码

 <div class="m-3 input-group; padding:10px; color:red; border: 3px solid ">
                                        <span class="input-group-text">Type</span>
                                    <select type="text" name="type" #type="ngModel"
                                        [(ngModel)]="employeeService.selectedEmployee.type "placeholder="Type">
                                        <option *ngFor="let dl of listItem" [value]="dl">{{dl}}</option>
                                    </select>
                                </div>

【问题讨论】：

嘿，请检查我的新更新。它应该工作。请检查并尝试并告诉我。最好的祝愿。 :)
employeeService.selectedEmployee TS 文件中没有名为employeeService.selectedEmployee 的属性。这是主要错误并检查控制台。你会发现错误。如果您解决了这些错误，您的代码将起作用。

标签： html angular drop-down-menu

【解决方案1】：

您的代码可能有问题，但我可以为您提供一个示例代码来将数据与下拉列表绑定。请检查并让我知道。 HTML

<select name="city" (change)="onChange($event.target.value)">
  <option *ngFor="let country of countries"  [value]="country.id">{{country.name}}</option>
</select>

TS：

 countries = [{
    id: 1, name: 'France', cities: ['Paris', 'Marseille', 'Nice']
  },
  {
    id: 2, name: 'Germany', cities: ['Hamburg', 'Berlin', 'Munich']
  },
  {
    id: 3, name: 'Italy', cities: ['Roma', 'Milan', 'Napoli']
  },
  ];
 
onChange(deviceValue) {
    //do something
  }

注意：更多信息请查看 Stackblitz 的链接LINK

新更新
我认为employeeService.selectedEmployee 在该链接上不可用。这就是您的代码无法正常工作的原因，您必须对listitem 进行一些更改。
最后，代码看起来像 =>
TS：

import { Component, OnInit } from '@angular/core';
@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  
  selectedtype: any;
   listItems= [{ name: 'A'},{ name: 'B'}];
  ngOnInit() {
  }
  onChange(deviceValue) {
    
  }
}

HTML：

<select name="dt" (change)="onChange($event.target.value)"
        [(ngModel)]="selectedtype" placeholder="Type"
        #type="ngModel" type="text">
  <option *ngFor="let data of listItems"  [value]="data.name">{{data.name}}</option>
  </select>

注意：提供的链接包含 4 个错误。

【讨论】：

我试过这个例子，对我不起作用
我在我的问题中添加了 stackbiltz
还是不行-stackblitz.com/edit/…
employeeService.selectedEmployee TS 文件中没有名为employeeService.selectedEmployee 的属性。这是主要错误并检查控制台。你会发现错误。如果您解决了这些错误，您的代码将起作用。
这是 Employee 类 export class Employee { _id: string; name: string; designation: string; salary: number; date: Date; type: string[]; } 在我的服务中我初始化了 selectedEmployee: Employee; 它只是代码很大所以我只是在 codeblitz 中添加必要的东西`我在控制台中没有看到任何错误

【解决方案2】：

尝试使用：

你需要在你的服务文件中初始化你的selectedEmployee

@Injectable({
  providedIn: "root"
})
export class EmployeeService {
  public selectedEmployee: Employee = {
    _id: '',
    name: '',
    date: null,
    designation: '',
    salary: null,
    type: null
  };
  constructor() {}
}

检查您的 stackblitz 演示路径。

我想这会对你有所帮助...

【讨论】：