要向数组中添加项目并更新 mat-list 的显示,您可以使用 Angular 的 ngFor 指令和数组的 push 方法。以下是一个示例解决方法:
import { Component } from '@angular/core';
@Component({
selector: 'app-my-component',
templateUrl: './my-component.component.html',
styleUrls: ['./my-component.component.css']
})
export class MyComponentComponent {
items: string[] = ['Item 1', 'Item 2', 'Item 3'];
addItem(newItem: string) {
this.items.push(newItem);
}
}
{{ item }}
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { MatListModule } from '@angular/material/list';
import { MatButtonModule } from '@angular/material/button';
import { AppComponent } from './app.component';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
BrowserAnimationsModule,
MatListModule,
MatButtonModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
这样,当您在输入框中输入新项目并点击“Add”按钮时,新项目将被添加到数组中,并且 mat-list 会自动更新以显示新的项目。