@ ng-选择奇怪的行为

时间：2018-06-01 07:43:00

标签： angular6

我正在使用Angular 6，因此我下载了@ng-select/ng-select版本2.1.2以获取自动完成输入框。但是，值不会在ng-select下拉框中呈现。然而他们在那里因为我可以选择它们并且它们以form.value的形式出现。然而，它们不会在下拉列表中显示为不可见或白色。我正在使用服务来使用httpClient获取值，然后我将这些值传递给[items]。我的代码如下。

获取值的功能：

getRelatedData() {

    // this.subscriptions.push(
    this.doctorsService.getRelatedData().subscribe(
      results => {
        this.specialties = results[0];
        this.cities = results[1];
      }
      // )
    );
  }

医生服务代码：

getRelatedData() {
    return forkJoin([this.getSpecialties(), this.getCities()]);
  }

getSpecialties(): Observable<Specialty[]> {
    const specialtiesURL = 'specialties/all';

    return this.service.get<Specialty[]>(specialtiesURL)
      .pipe(catchError(ErrorHandler.handleError));
  }



getCities(): Observable<City[]> {
    const citiesURL = 'cities/all';

    return this.service.get<City[]>(citiesURL)
      .pipe(catchError(ErrorHandler.handleError));
  }

模板HTML代码：

<br/>

<div class="container-fluid">

  <!--<ng4-loading-spinner></ng4-loading-spinner>-->

  <form [formGroup]="doctorForm" (ngSubmit)="submitForm()" class="ui form" novalidate>


    <input *ngIf="id" type="hidden" id="id"
           formControlName="id" name="id">

    <div [ngClass]="{ 'form-group ': true, 'row' : true }">
      <label [ngClass]="{
              'has-danger': doctorForm.get('lastName').invalid && ( doctorForm.get('lastName').touched || doctorForm.get('lastName').dirty ),
              'has-success': doctorForm.get('lastName').valid && ( doctorForm.get('lastName').dirty || doctorForm.get('lastName').touched )
              }" for="lastName" class="col-sm-2 col-form-label">Επώνυμο:</label>
      <div class="col-4">
        <input type="text" id="lastName"
               [ngClass]="{ 'form-control': true,
                'is-invalid': doctorForm.get('lastName').invalid && ( doctorForm.get('lastName').touched || doctorForm.get('lastName').dirty ),
                'is-valid': doctorForm.get('lastName').valid && ( doctorForm.get('lastName').dirty || doctorForm.get('lastName').touched )
                }"
               name="lastName" formControlName="lastName" autocomplete="off" required>
        <!-- VALIDATION -->
        <div class="has-danger"
             *ngIf="doctorForm.get('lastName').hasError('required') && ( doctorForm.get('lastName').touched || doctorForm.get('lastName').dirty )">
          {{ validationMessages.lastName.required }}
        </div>
        <!-- END OF VALIDATION -->
      </div>
    </div>


    <div [ngClass]="{ 'form-group ': true, 'row' : true }">
      <label [ngClass]="{
              'has-danger': doctorForm.get('firstName').invalid && ( doctorForm.get('firstName').touched || doctorForm.get('firstName').dirty ),
              'has-success': doctorForm.get('firstName').valid && ( doctorForm.get('firstName').dirty || doctorForm.get('firstName').touched )
              }" for="firstName" class="col-sm-2 col-form-label">Όνομα:</label>
      <div class="col-4">
        <input type="text" id="firstName"
               [ngClass]="{
                'form-control': true,
                'is-invalid': doctorForm.get('firstName').invalid && ( doctorForm.get('firstName').touched || doctorForm.get('firstName').dirty ),
                'is-valid': doctorForm.get('firstName').valid && ( doctorForm.get('firstName').dirty || doctorForm.get('firstName').touched )
                }"
               name="firstName" formControlName="firstName" autocomplete="off" required>
        <!-- VALIDATION -->
        <div class="has-danger"
             *ngIf="doctorForm.get('firstName').hasError('required') && ( doctorForm.get('firstName').touched || doctorForm.get('firstName').dirty )">
          {{ validationMessages.firstName.required }}
        </div>
        <!-- END OF VALIDATION -->
      </div>
    </div>


    <div [ngClass]="{ 'form-group ': true, 'row' : true }">
      <label for="fatherName" class="col-sm-2 col-form-label">Όνομα Πατρός:</label>
      <div class="col-4">
        <input type="text" id="fatherName"
               [ngClass]="{ 'form-control': true }"
               name="fatherName" formControlName="fatherName" autocomplete="off">
        <!-- ΝΟ VALIDATION -->
      </div>
    </div>


    <div [ngClass]="{ 'form-group ': true, 'row' : true }">
      <label [ngClass]="{
              'has-danger': doctorForm.get('email').invalid && ( doctorForm.get('email').touched || doctorForm.get('email').dirty ),
              'has-success': doctorForm.get('email').valid && ( doctorForm.get('email').dirty || doctorForm.get('email').touched )
              }"
             for="email" class="col-sm-2 col-form-label">E-mail:</label>
      <div class="col-4">
        <input [ngClass]="{ 'form-control': true,
                'is-invalid': doctorForm.get('email').invalid && ( doctorForm.get('email').touched || doctorForm.get('email').dirty ),
                'is-valid': doctorForm.get('email').valid && ( doctorForm.get('email').dirty || doctorForm.get('email').touched )
                }"
               type="text" id="email"
               formControlName="email" name="email" autocomplete="off">
        <!-- VALIDATION -->
        <div class="has-danger"
             *ngIf="doctorForm.get('email').hasError('pattern') && ( doctorForm.get('email').touched || doctorForm.get('email').dirty )">
          {{ validationMessages.email.pattern }}
        </div>
        <!-- END OF VALIDATION -->
      </div>
    </div>


    <div [ngClass]="{ 'form-group ': true, 'row' : true }">
      <label [ngClass]="{
              'has-danger': doctorForm.get('telephone').invalid && ( doctorForm.get('telephone').touched || doctorForm.get('telephone').dirty ),
              'has-success': doctorForm.get('telephone').valid && ( doctorForm.get('telephone').dirty || doctorForm.get('telephone').touched )
              }" for="telephone" class="col-sm-2 col-form-label">Τηλέφωνο:</label>
      <div class="col-4">
        <input type="text" id="telephone"
               [ngClass]="{
              'form-control': true,
              'is-invalid': doctorForm.get('telephone').invalid && ( doctorForm.get('telephone').touched || doctorForm.get('telephone').dirty ),
              'is-valid': doctorForm.get('telephone').valid && ( doctorForm.get('telephone').dirty || doctorForm.get('telephone').touched )
              }"
               name="telephone" formControlName="telephone" autocomplete="off" required>
        <!-- VALIDATION -->
        <div class="has-danger"
             *ngIf="doctorForm.get('telephone').hasError('required') && ( doctorForm.get('telephone').touched || doctorForm.get('telephone').dirty )">
          {{ validationMessages.telephone.required }}
        </div>
        <div class="has-danger"
             *ngIf="doctorForm.get('telephone').hasError('pattern') && ( doctorForm.get('telephone').touched || doctorForm.get('telephone').dirty )">
          {{ validationMessages.telephone.pattern }}
        </div>
        <!-- END OF VALIDATION -->
      </div>
    </div>

    <div class="form-group row">
      <label [ngClass]="{
      'col-sm-2': true, 'col-form-label' : true,
      'has-danger': doctorForm.get('specialty').invalid && ( doctorForm.get('specialty').touched || doctorForm.get('specialty').dirty ),
      'has-success': doctorForm.get('specialty').valid && ( doctorForm.get('specialty').dirty || doctorForm.get('specialty').touched )
        }" for="specialty">Ειδικότητα:</label>
      <div class="col-4">
        <ng-select
                   [ngClass]="{
        'form-control': true,
        'is-invalid': doctorForm.get('specialty').invalid && ( doctorForm.get('specialty').touched || doctorForm.get('specialty').dirty ),
        'is-valid': doctorForm.get('specialty').valid && ( doctorForm.get('specialty').dirty || doctorForm.get('specialty').touched )
        }"
                   id="specialty" name="specialty"
                   formControlName="specialty"
                   [items]="specialties"
                   [bindLabel]="name"
                   [bindValue]="id">

        </ng-select>
        <!-- VALIDATION -->
        <div class="has-danger"
             *ngIf="doctorForm.get('specialty').hasError('required') && doctorForm.get('specialty').touched">
          {{ validationMessages.specialty.required }}
        </div>
        <!-- END OF VALIDATION -->
      </div>
    </div>

    <div class="form-group row">
      <label  class="col-sm-2 col-form-label" for="city">Πόλη:</label>
      <div class="col-4">
        <ng-select *ngIf="cities"
                   class="form-control"
                   id="city" name="city"
                   formControlName="city"
                   [items]="cities"
                   [virtualScroll]="true">
        </ng-select>
      </div>
    </div>


    <div class="form-group row">
      <div class="col-sm-offset-4 col-sm-10">
        <button class="btn btn-danger" type="reset">Reset</button>

        <button type="submit" class="btn btn-info" style="margin-right: 50px;" [disabled]="!doctorForm.valid">Submit
        </button>
      </div>
    </div>

  </form>
  <br>

  <p>Form value: {{ doctorForm.value | json }}</p>
  <p>Form status: {{ doctorForm.status | json }}</p>

</div>

ng-select包含值，但它没有显示它们??? 任何想法??

贝娄有一个问题的屏幕截图 ScreenShot of The Problem

请参阅空下拉框

请参阅所选项目下方的表格价值

查看JavaScript控制台中的数据

0 个答案:

没有答案
相关问题
最新问题