要根据用户输入的属性显示对象的值,你可以使用Angular的属性绑定和插值语法。以下是一个示例解决方法:
首先,创建一个简单的组件,例如AppComponent:
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
template: `
Value: {{ getObjectValue() }}
`
})
export class AppComponent {
object = { name: 'John', age: 25, location: 'New York' };
propertyName = '';
getObjectValue() {
return this.object[this.propertyName];
}
}
在上面的示例中,我们在模板中创建了一个输入框,用户可以输入属性名称。然后,我们使用双向数据绑定将输入框的值绑定到propertyName
属性。
在组件的getObjectValue()
方法中,我们使用this.propertyName
作为对象的属性名称,以获取对应的值。然后,我们在模板中使用插值语法将该值显示出来。
请记得在模块中导入FormsModule以启用ngModel指令。
接下来,在app.module.ts文件中导入FormsModule:
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { AppComponent } from './app.component';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
FormsModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
现在,你可以运行应用并输入对象的属性名称来显示相应的值。