I can not load data into an angular mat-select 6

0

This is my html

<div class="container">
  <form [formGroup]="createForm" (ngSubmit)="onPostCreateTypeFields()" style="width:400px; margin: 0 auto;">
    <h1>Fields</h1>

    <div class="required-field-block">
        <input formControlName="name" type="text" placeholder="Fields" class="form-control">
        <div class="required-icon">
            <div class="text">*</div>
        </div>
    </div>

    <div class="required-field-block">
        <input formControlName="name" type="text" placeholder="Nome" class="form-control">
        <div class="required-icon">
            <div class="text">*</div>
        </div>
    </div>

    <mat-form-field>
        <mat-select placeholder="Type Fields" [(ngModel)]="dataSource" name="field">
          <mat-option *ngFor="let field of dataSource">   
            {{field.name}}
          </mat-option>
        </mat-select>
      </mat-form-field>


    <button type="submit" class="btn btn-primary" >Criar</button>
</form>
</div>

This is my component

import { Component, OnInit } from '@angular/core';
import { FieldsService } from '../Services/Fields/fields.service';
import { setTheme } from '../../../node_modules/ngx-bootstrap/utils';

@Component({
  selector: 'app-fields',
  templateUrl: './fields.component.html',
  styleUrls: ['./fields.component.css'],
  providers: [FieldsService]
})
export class FieldsComponent implements OnInit {

  selectedValue: string;
  private operUrl: 'api/Fields';
  public dataSource: Model.Itens[];

  constructor(private _fieldService: FieldsService) { 
    setTheme('bs3');
  }

  ngOnInit() {

    this._fieldService
      .getAll<Model.Result>()
      .subscribe((data: Model.Result) => {
        debugger;
        this.dataSource = data.itens;
      });
  }
}

My Model.Result

declare namespace Model{
    export interface Result{
        error: boolean;
        itens: Array<Itens>;
        message: string;
    }

    export interface Itens{
        operatorId: string;
        name: string;
    }
}

this is the error

  

compiler.js: 215 Uncaught Error: Template parse errors: 'mat-option' is   not a known element:   1. If 'mat-option' is an Angular component, then verify that it is part of this module.   2. If 'mat-option' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@ NgModule.schemas' of this component   to suppress this message. ("eld >                        [ERROR - >]
              {{field.name}}              "): ng: ///AppModule/FieldsComponent.html@31: 10 'mat-select' is not a known element:

How do I resolve this?

    
asked by anonymous 18.07.2018 / 16:00

1 answer

2

Do not forget to import MatSelectModule into the module that you declare your component

import {MatSelectModule} from '@angular/material/select';



imports: [..., MatSelectModule]
    
18.07.2018 / 16:04