如何在角材中放置零件的出口类别

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

Link of the component

我这样做了：

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

我在 app.component.html

中添加了html代码

结果：

选择列表但没有选项，原因是我不知道将导出详细信息放在何处

enter image description here

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