I can’t load data into an angular mat-select 6

Asked

Viewed 693 times

1

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

that’s the mistake

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 fix it?

html angular angular-6

1 answer

3


Don’t forget to import Matselectmodule into the module that you declare your component

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



imports: [..., MatSelectModule]

Browser other questions tagged html angular angular-6

You are not signed in. Login or sign up in order to post.