Material 2 Form-Control Select funktioniert Nicht mit Async Source

Ich bin mit Eckigen 4.3.4 mit Material 2.0.0-beta.12 und ich habe Probleme beim erstellen einer Matte-wählen Sie zum generieren eines dynamischen Matte-option-Liste von einer asynchronen Quelle. Alles, was ich bekommen ist der Platzhalter und das dropdown nicht erweitern. Ich weiß nicht einmal erhalten und Fehler-code.

Hier ist ein Beispiel von meinem code AKTUALISIERT:

 <form [formGroup]="snoozeForm" novalidate>
  <div fxLayout="column">
    <mat-form-field>
      <mat-select formControlName="snooze_reason">
        <mat-option [value]="reason.attributes.snooze_reason_code" *ngFor="let reason of reasons">{{ reason }}</mat-option>
      </mat-select>
    </mat-form-field>
</form>

Wie Sie sehen können Gründen ist das array wird dynamisch gefüllt. Ich muss Blick etwas einfach, aber ich bin sicher, dass Gründen wird immer aufgefüllt.

Hier ist, wo ich das array zu füllen:

ngOnInit() {
  this.generateForm();
  this.httpService.getSnoozeReasons()
    .subscribe( res => {
      this.reasons = res;
    }, (error: any) => {
      const msg: Message = { title: 'Frontend API Error', textbody1: '' };
      if (error.message) {
        msg.textbody1 = <any>error.message;
        msg.textbody2 = `Task-details component - Snooze reasons`;
      } else {
        msg.textbody1 = `HTTP ${error.status}: ${error.statusText}`;
        msg.textbody2 = `Task-details - Snooze reasons: ${error.url}`;
      }
      this.messageService.createMessage(msg);
    })
  ;
}

generateForm(): void {
  this.snoozeForm = this.fb.group({
    snooze_reason: ['', [Validators.required]],
    snooze_hour: ['', [Validators.pattern('[0-9]*'), Validators.max(72)]],
    snooze_minute: ['', [Validators.required, Validators.min(5), Validators.pattern('[0-9]*')]]
  });
}

Material 2 Form-Control Select funktioniert Nicht mit Async Source

Hat jemand hatte dieses Problem mit asynchronen Daten und der Select-Formular-Steuerelement?

"ich bin aber sicher, dass Gründe, die ist immer aufgefüllt" also, wie sieht es aus, wenn Sie die Konsole loggen? 🙂
und was ist reason? und warum wird es verwendet als value es?
Wie Sie sehen können aus dem screenshot habe ich Hinzugefügt, Gründe ist ein array von Objekten, daher ist ein Objekt, und der Wert zugewiesen werden, eine Eigenschaft des Objekts.
Dein code sieht gut zu mir, nur Problem, das ich sehe ist, dass Sie zeigen einige Eigenschaft der interpolation.. {{reason.type}} zum Beispiel in der dropdown-Liste auswählen, aber das ist nicht das Problem, würden Sie zumindest sehen [object Object] in Ihrem dropdown-trotz, dass. Könntest du vielleicht helfen, ein plunker/stackblitz, zeigt sich das Problem? Als ein anderes detail, keine Notwendigkeit zu verwenden novalidate mehr angewendet wird, automatisch durch Eckige heutzutage.
Ja, ich bin am überlegen zu versuchen, zu replizieren, das Problem mit einer viel einfacheren version an diesem Wochenende. Ich wusste nicht, dass gab es keine Notwendigkeit für die novalidate mehr. Vielen Dank für das heads-up!

InformationsquelleAutor Andrew Lobban | 2017-10-27

Ich denke, dass problem ist nicht die Gründe async-array, sonst klug, wenn Sie die formControlName="snooze_reason", wenn Sie versuchen, löschen formcontrolname, die "select" Arbeit ist in Ordnung. Dies geschieht, weil die Steuerelemente von Eckigen Formen müssen deklariert werden als child-form Gruppe.

JS:

import {Component} from '@angular/core';
import {FormControl, FormGroup} from '@angular/forms';

@Component({
  selector: 'material-select-angular',
  templateUrl: 'material-select-angular.html',
})
export class MaterialSelectAngular implements OnInit {
  formParent = new FormGroup({
    snoozeReason: new FormControl()
  });
  reasons = [];
  
  ngOnInit(){
    setTimeout(() => {
      this.reasons = [
        {prop: 'something'},
        {prop: 'anything'},
        {prop: 'some'}
      ];
    }, 2000);
  }
}

HTML:

<form [formGroup]="formParent">
<mat-form-field>
  <mat-select formControlName="snoozeReason" placeholder="Favorite food">
    <mat-option *ngFor="let reason of reasons" [value]="reason.prop">
      {{ reason.prop }}
    </mat-option>
  </mat-select>
</mat-form-field>
</form>

Weitere details zur Referenz. Wie Sie sehen können ich bin mit dem FormBuilder service. Bekomme ich nur das Problem, wenn ich mit async Quelle der Daten. Ich habe versucht mit der async |, wie es verwendet wird in der automatischen Vervollständigung bekam aber mehr Fehler.

InformationsquelleAutor Guillodacosta

1

Dank @Guillodacosta!

Hatte ich ein anderes paar Augen, um zu überprüfen, dass der code korrekt war. Ich glaube, mein Problem ist jetzt, dass ich in Konflikt mit meiner UI-Pakete. Ng-Bootstrap-vielleicht verursacht mein Material 2 Wählen Sie nicht ordnungsgemäß wiedergegeben werden.

Über das vergangene Wochenende nahm ich einige Zeit, um zu replizieren meinem Szenario, und bestätigt, dass der code, den ich haben sollte in Zusammenarbeit mit den asynchronen Daten, Auffüllen von Material 2 Wählen Sie in der Drop-down-Menü.
- Schließlich gekommen, um zu entfernen Ng-Bootstrap und jetzt ist mein code FUNKTIONIERT!!!
InformationsquelleAutor Andrew Lobban

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.