时间戳

首页 > 解决方案 > Ng-options 不起作用，无论我尝试什么

html - Ng-options 不起作用，无论我尝试什么

问题描述

这是我的选择

<select ng-options="country.country for country in countries" formControlName="country"></select></label>

这是组件打字稿：

    import { Component } from '@angular/core';
import { AuthService } from '../../services/auth/auth.service'
import { Router, Params } from '@angular/router';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { FirestoreService } from '../../services/firestore/firestore.service';
import { User } from '../../models/user/user.model';

import countriesJSON from '../../json/countries-and-states.json';

@Component({
  selector: 'app-login-register',
  templateUrl: './login-register.component.html',
  styleUrls: ['./login-register.component.css']
})
export class LoginRegisterComponent {

  registerForm: FormGroup;
  errorMessage: string = '';
  successMessage: string = '';
  users: User[];
  countries = countriesJSON.countries;

  constructor(
    public authService: AuthService,
    private router: Router,
    private fb: FormBuilder,
    private fireservice: FirestoreService
  ) {
    this.createForm();

   }

   createForm() {
     this.registerForm = this.fb.group({
       email: ['', Validators.required ],
       password: ['',Validators.required],
       repassword: ['',Validators.required],
       age: ['',Validators.required],
       state: ['',Validators.required],
       country: ['',Validators.required]
     });
   }

   tryGoogleLogin(){
     this.authService.doGoogleLogin()
     .then(res =>{
       this.router.navigate(['/user']);
     }, err => console.log(err)
     )
   }

   tryRegister(value){
     this.authService.doRegister(value)
     .then(res => {
       console.log(res);
       this.fireservice.createUser(value);
       this.errorMessage = "";
       this.successMessage = "Your account has been created";
     }, err => {
       console.log(err);
       this.errorMessage = err.message;
       this.successMessage = "";
     })
   }

   register(user: User){

  }

  update(user: User) {
    this.fireservice.updateUser(user);
  }
  ngOnInit(){
    console.log(this.countries);

  }
}

和json：

    {
  "countries": [
    {
      "country": "Afghanistan",
      "states": ["Badakhshan", "Badghis", "Baghlan", "Balkh", "Bamian", "Daykondi", "Farah", "Faryab", "Ghazni", "Ghowr", "Helmand", "Herat", "Jowzjan", "Kabul", "Kandahar", "Kapisa", "Khost", "Konar", "Kondoz", "Laghman", "Lowgar", "Nangarhar", "Nimruz", "Nurestan", "Oruzgan", "Paktia", "Paktika", "Panjshir", "Parvan", "Samangan", "Sar-e Pol", "Takhar", "Vardak", "Zabol"]
    },
    {
      "country": "Albania",
      "states": ["Berat", "Dibres", "Durres", "Elbasan", "Fier", "Gjirokastre", "Korce", "Kukes", "Lezhe", "Shkoder", "Tirane", "Vlore"]
    },
    {
      "country": "Algeria",
      "states": ["Adrar", "Ain Defla", "Ain Temouchent", "Alger", "Annaba", "Batna", "Bechar", "Bejaia", "Biskra", "Blida", "Bordj Bou Arreridj", "Bouira", "Boumerdes", "Chlef", "Constantine", "Djelfa", "El Bayadh", "El Oued", "El Tarf", "Ghardaia", "Guelma", "Illizi", "Jijel", "Khenchela", "Laghouat", "Muaskar", "Medea", "Mila", "Mostaganem", "M'Sila", "Naama", "Oran", "Ouargla", "Oum el Bouaghi", "Relizane", "Saida", "Setif", "Sidi Bel Abbes", "Skikda", "Souk Ahras", "Tamanghasset", "Tebessa", "Tiaret", "Tindouf", "Tipaza", "Tissemsilt", "Tizi Ouzou", "Tlemcen"]
    },
    {
      "country": "Andorra",
      "states": ["Andorra la Vella", "Canillo", "Encamp", "Escaldes-Engordany", "La Massana", "Ordino", "Sant Julia de Loria"]
    },
    {
      "country": "Angola",
      "states": ["Bengo", "Benguela", "Bie", "Cabinda", "Cuando Cubango", "Cuanza Norte", "Cuanza Sul", "Cunene", "Huambo", "Huila", "Luanda", "Lunda Norte", "Lunda Sul", "Malanje", "Moxico", "Namibe", "Uige", "Zaire"]
    },
    {
      "country": "Antarctica",
      "states": []
    },
    {
      "country": "Antigua and Barbuda",
      "states": ["Barbuda", "Redonda", "Saint George", "Saint John", "Saint Mary", "Saint Paul", "Saint Peter", "Saint Philip"]
    },
    {
      "country": "Argentina",
      "states": ["Buenos Aires", "Buenos Aires Capital", "Catamarca", "Chaco", "Chubut", "Cordoba", "Corrientes", "Entre Rios", "Formosa", "Jujuy", "La Pampa", "La Rioja", "Mendoza", "Misiones", "Neuquen", "Rio Negro", "Salta", "San Juan", "San Luis", "Santa Cruz", "Santa Fe", "Santiago del Estero", "Tierra del Fuego", "Tucuman"]
    },

......还有更多，但它是一样的。

我试过把 {{countries[2].country}} 放在 html 中，它工作得很好，它显示了一个国家。并以 90 种不同的方式尝试了 ng-option 值，我不知道该怎么办。

我在这方面浪费了太多时间，当然这是一件容易解决的小事，但我需要知道，因为我不知道哈哈

标签： htmlangulartypescript

解决方案

我认为你使用ng-options的是 in angularJS，这里Angular有点不同

在这里我们可以option使用ng-for

  <select formControlName="country"> 
    <option *ngFor="let item of countries" [value]="item.country">{{ item.country }}</option>
  </select>

希望能帮助到你

推荐阅读