Угловой чип материала не работает с угловой версией 7 - PullRequest
0 голосов
/ 21 февраля 2019

Угловой материал Чип не работает с угловой версией 7

Tech : Угловая версия 7, угловой cli, угловой материал.

Результат, который я хочу: Я просто хочу использовать модуль чипа углового материала.

То, что я сделал:

  • Я установил "@angular/ материал ":" ^ 7.3.3 "и @ angular / animations": "^ 7.2.6",

  • Я импортировал NoopAnimationsModule и MatChipsModule в мой модуль приложения.

    Мой импорт в модуле моего приложения:

    import {NoopAnimationsModule, BrowserAnimationsModule} из '@ angular / platform-browser / animations';

    import {MatChipsModule} из '@ angular / material / chips'; импорт {MatCommonModule, MatInputModule} из '@ angular / material';

Тогда это мой компонент:

          <mat-form-field>
            <mat-chip-list #chipList>
              <mat-chip>Chip 1</mat-chip>
              <mat-chip>Chip 2</mat-chip>
            </mat-chip-list>
            <input [matChipInputFor]="chipList">
          </mat-form-field>

Ошибка, которую я получаю:

Белый экран при запуске приложения и это сообщение в моем коде: "mat-chip-list" не являетсякпсобственный элемент "

Снимок экрана моего кода и моего браузера:

enter image description here

1 Ответ

0 голосов
/ 21 февраля 2019

Вот как должен выглядеть ваш импорт.

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { NoopAnimationsModule, BrowserAnimationsModule } from '@angular/platform-browser/animations';
import {MatChipsModule} from '@angular/material/chips';
import {MatCommonModule, MatInputModule} from '@angular/material';


import { AppComponent } from './app.component';

@NgModule({
  imports:      [ BrowserModule, FormsModule, NoopAnimationsModule, MatChipsModule, BrowserAnimationsModule,MatInputModule,MatCommonModule ],
  declarations: [ AppComponent ],
  bootstrap:    [ AppComponent ]
})
export class AppModule { }

Вот стекаблитц вашего кода

...