Как поставить класс экспорта компонента в угловой материал

Question

Здравствуйте, я хочу вставить выбранный выпадающий список с угловым материалом.

Мой вопрос, где мы поставили это точно:

export interface Food {
  value: string;
  viewValue: string;
}

export class SelectOverviewExample {
  foods: Food[] = [
    {value: 'steak-0', viewValue: 'Steak'},
    {value: 'pizza-1', viewValue: 'Pizza'},
    {value: 'tacos-2', viewValue: 'Tacos'}
  ];
}

Ссылка компонента

Я сделал это:

app.module .ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import {MatTabsModule} from '@angular/material/tabs';
import {MatSelectModule} from '@angular/material/select';
import {MatInputModule} from '@angular/material/input';

import { AppComponent } from './app.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { InterfaceComponent } from './interface/interface.component';

@NgModule({
  declarations: [
    AppComponent,
    InterfaceComponent
  ],
  imports: [
    BrowserModule,
	MatTabsModule,
  BrowserAnimationsModule,
  MatSelectModule,
  MatInputModule

  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

И я добавил HTML-код в app.component.html

Результат:

выберите список, но без параметров, потому что я не знал, куда я помещу детали экспорта

введите описание изображения здесь

Answer 1

для этого случая вы должны поместить в app.component.ts как:

import { Component } from '@angular/core';

interface Food {
  value: string;
  viewValue: string;
}

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  foods: Food[] = [
    {value: 'steak-0', viewValue: 'Steak'},
    {value: 'pizza-1', viewValue: 'Pizza'},
    {value: 'tacos-2', viewValue: 'Tacos'}
  ];
}