Matériel 2 Contrôle de Formulaire, choisissez de ne Pas travailler avec Async Source

Je suis en cours d'exécution Angulaire 4.3.4 avec du Matériel 2.0.0-bêta.12 et je vais avoir des problèmes lorsque vous essayez de créer un tapis-sélectionnez cette option pour générer une dynamique mat-liste d'options à partir d'une source asynchrone. Tout ce que j'obtiens est l'espace réservé et la liste n'est pas développée. Je ne suis pas à même de recevoir et de code d'erreur.

Voici un exemple de mon code mis à JOUR:

 <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>

Comme vous pouvez le voir raisons est le tableau qui obtient rempli dynamiquement. Je dois être donnant sur quelque chose de simple, mais je suis sûr que raisons est arriver peuplée.

Est ici où je remplir le tableau:

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]*')]]
  });
}

Matériel 2 Contrôle de Formulaire, choisissez de ne Pas travailler avec Async Source

Quelqu'un a eu ce problème avec asynchrone de données et Sélectionnez le formulaire de contrôle?

  • "mais je suis sûr que des raisons est d'obtenir peuplée" alors, comment faut-il regarder comme lorsque vous avez la console de log? 🙂
  • et qu'est-ce que reason? et pourquoi est-il utilisé comme value là?
  • Comme vous pouvez le voir dans la capture d'écran que j'ai ajouté, raisons est un tableau d'objets, par conséquent, la raison est un objet et la valeur sera attribuée à une propriété de cet objet.
  • Ton code me semble bon, seul problème que je vois est que vous devez montrer une propriété à votre interpolation.. {{reason.type}} par exemple dans votre liste déroulante, mais ce n'est pas la question, vous auriez du voir au moins [object Object] dans votre liste déroulante malgré cela. Pourriez-vous peut-être créer un plunker/stackblitz qui met en valeur la question? Comme aucun détail, pas besoin d'utiliser novalidate plus, il est appliqué automatiquement par Angulaire de nos jours.
  • Oui, je pense que d'essayer de reproduire le problème avec une version beaucoup plus simple de ce week-end. Je ne le savais pas, il n'était pas nécessaire pour le novalidate plus. Merci pour le heads up!