1

Esse é meu 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>

esse é meu componente

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

meu Model.Result

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

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

esse é o erro

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:

Como resolvo isso?

1 Resposta 1

3

Nao esqueca de importar o MatSelectModule no module que vc declara seu componente

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



imports: [..., MatSelectModule]

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .