Переплет html выпадающий из Angular 5 - PullRequest
Новая
       3

Переплет html выпадающий из Angular 5

0 голосов
/ 12 мая 2018

Это касается Binding Html Dropdown из Angular 5 с использованием Asp.net Core 2.o в качестве службы. Я могу подключиться к основной службе Asp.net из приложения Angular и не могу перенести данные в приложение Angular 5. Здесь я использую подход Reactive Forms. Пожалуйста, кто-нибудь может подсказать мне, в чем я здесь ошибаюсь.

Пожалуйста, найдите код ниже. 

The following code i am using Asp.net core 2.0 to bring the data 

[HttpGet]
        [Route("Districts")]
        public async Task<IActionResult> GetDistricts()
        {
            IList<District> districts;
            try
            {
                districts = await _customerService.GetDistricts();
            }
            catch (Exception ex)
            {
                throw;
            }
            return Ok(districts);
       }

In Angular 5 Service: Наименование услуги: CustomerService.ts 

import { Injectable  } from '@angular/core';
import {HttpClient, HttpParams, HttpRequest, HttpEvent, HttpHeaders} from '@angular/common/http'; 
import { Observable } from 'rxjs/Observable';  
import { Router } from '@angular/router';  
import 'rxjs/add/operator/map';  
import 'rxjs/add/operator/catch';  
import 'rxjs/add/observable/throw';  
import { District } from '../models/district';
import { Customer } from '../models/customer';

@Injectable()

export class CustomerService {
  myAppUrl: string = "http://localhost:52406/api/Customer";  
  public summaries: any[];
  constructor(
    private _http:HttpClient) {
  }

  getDistricts(): Observable<any> 
  {
    return this._http.get(this.myAppUrl + '/Districts')
    .map((response:Response) =>response.json)
    .catch(this.errorHandler);
  }

  errorHandler(error: Response) {  
    console.log(error);  
    return Observable.throw(error);  
}  
}

Код компонента ниже: - 

export class AddCustomerComponent implements OnInit {
  errorMessage: any;  
  addNewCustomerForm : FormGroup;
  districts :string [];

  constructor(private flashMessage : FlashMessagesService,
              private _customerService: CustomerService
          ) { }

  getAllDistricts()
  {
   this._customerService.getDistricts()
    .subscribe(result => {this.districts =result  }); 
   console.log(this.districts);
 }

  ngOnInit() {
    this.addNewCustomerForm = new FormGroup({
      'firstName' : new FormControl(null, [Validators.required, Validators.minLength(3)]),
      'lastName'  : new FormControl(null, ),
      'surName'   : new FormControl(null, [Validators.required, Validators.minLength(3)]),
      'mobileNo'  : new FormControl(null,[Validators.required,Validators.maxLength(10),Validators.minLength(10)]),
      'emailId'   : new FormControl(null, [Validators.required, 
                                           Validators.email,Validators.pattern("[^ @]*@[^ @]*")  
                                          ]),
      'telephone' : new FormControl(null),
      'address1'  : new FormControl(null,[Validators.required]),
      'address2'  : new FormControl(null,[Validators.required]),
      'district'  : new FormControl(null,[Validators.required]),
      'postcode'  : new FormControl(null,[Validators.required,Validators.minLength(6),
                          Validators.maxLength(6)]),
      'connectionType': new FormControl(null),
   })
    this.getAllDistricts();
  }

}

Код ниже, который я использую в HTML: 

 <div class="row">
   <div class="col-md-2">
        <label class="label" for="district">District</label>
   </div>
    <div class="col-md-4">
       <select
            class="dropdown" 
            ng-model name="district" 
            formControlName="district" >  
            <option 
             *ngFor="let dist of districts"
                [ngValue]="dist.districtId" >  
                  {{dist.districtName}}  
             </option>  
      </select>  
</div>

Я получаю ошибку: Справочная ошибка: результат не определен.

Спасибо GK

1 Ответ

0 голосов
/ 23 мая 2018

Единственная проблема, которую я вижу в вашем коде, заключается в том, что ваш объект districts представляет собой массив строк: 

districts :string [];

, но вы пытаетесь использовать его как объект на стороне сервера: 

<option 
         *ngFor="let dist of districts"
            [ngValue]="dist.districtId" >  '
              {{dist.districtName}}  
         </option>
...