Question

我是Angular 5的新手，正在编写教程。在表单中显示下拉值时很震惊。下面显示的component.html不显示下拉值。这是我试过的。我们非常感谢您解决此错误的任何帮助。

model.ts：

export class State {

    constructor(public code: number, public description: string) { }
  }

service.ts：

import { Injectable } from '@angular/core';

import { State } from '../shared/prediction-input.model';

@Injectable()
export class GenericService {
   getStates(): State[] {
      let states = [
         new State(1, 'CA'),
         new State(2 , 'TX'),
         new State(3 , 'IL'),
         new State(4 , 'WI')
      ]  
      return states;      
   }


}

component.html：

Select Vehicle Owner State: 



 <select name="State" [(ngModel)]="State" >
                            <option [ngValue]="null" disabled>Choose Vehicle owner State</option>
                            <option *ngFor="let s1 of allStates" [ngValue]="s1.code">
                                {{ s1.code }}
                              </option>


                    </select>

component.ts：

ngOnInit() {
      this.allStates = this.genericService.getStates();
    console.log("State Code : " + this.allStates[0].code);
    console.log("Description Code : " + this.allStates[0].description);
  }

Answer 1

请试试这个：

第1步：类状态：

export class State{
   constructor(public code: number, public description: string) {}
}

第2步：在service.ts

export class Service {
      private state: State[] = [
         new State(1, 'CA'),
         new State(2 , 'TX'),
         new State(3 , 'IL'),
         new State(4 , 'WI')
       ];
      constructor() { }

      getData() {
        return this.state;
      }
    }

第3步：在component.ts

export class AppComponent {
  public state: State[] = [];
  constructor(public service: Service) {
  }
  ngOnInit() {
        this.state = this.service.getData();
    }
 }

第4步：组件html

<div *ngFor="let item of state;let i = index">
    {{item.code}}
    {{item.description}}
</div>

或：

<select name="State">
 <option [ngValue]="null" disabled>Choose Vehicle owner State</option>
 <option *ngFor="let item of state;let i = index" >
   {{item.code}}
   {{item.description}}
  </option>
  </select>

Answer 2

不确定您面临的问题，但这是一个有效的stackblitz

https://stackblitz.com/edit/angular4-dm5bd2?file=app/app.module.ts

服务

＆＃13;

import { Injectable } from '@angular/core';

import { State } from './State';

@Injectable()
export class GenericService {
   getStates(): State[] {
      let states = [
         new State(1, 'CA'),
         new State(2 , 'TX'),
         new State(3 , 'IL'),
         new State(4 , 'WI')
      ]  
      return states;      
   }
}

＆＃13;

模型

＆＃13;

export class State {
    constructor(public code: number, public description: string) { }
  }

＆＃13;

组件模板

＆＃13;

<hello name="{{ name }}"></hello>
<p>
	<select name="State" [(ngModel)]="State">
                            <option [ngValue]="null" disabled>Choose Vehicle owner State</option>
                            <option *ngFor="let s1 of allStates" [ngValue]="s1.code">
                                {{ s1.code }}
                              </option>


                    </select>
</p>

＆＃13;

组件类

＆＃13;

import { Component, OnInit } from '@angular/core';
import { GenericService } from './GenericService';


@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  name = 'Angular 4';
  public allStates: any[] = [];
  public State: any;

  constructor(private genericService: GenericService) {

  }

  ngOnInit() {
    this.allStates = this.genericService.getStates();
    console.log("State Code : " + this.allStates[0].code);
    console.log("Description Code : " + this.allStates[0].description);
  }
}

＆＃13;

应用程序模块：您必须在提供程序中注册GenericService。

＆＃13;

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';

import { AppComponent } from './app.component';
import { HelloComponent } from './hello.component';
import { GenericService } from './GenericService';

@NgModule({
  imports: [BrowserModule, FormsModule],
  declarations: [AppComponent, HelloComponent],
  bootstrap: [AppComponent],
  providers:[GenericService]
})
export class AppModule { }

＆＃13;

无法使用Angular 5显示下拉值

2 个答案: