如何通过Angular中的字符串文字访问对象

Posted 2023-03-13

【中文标题】如何通过Angular中的字符串文字访问对象

【英文标题】：How to access object via string literals in Angular

【发布时间】：2020-02-02 16:00:31

【问题描述】：

我想向用户展示我在“数据”变量中获得的信息

我在网上收到一条警告，上面写着“不允许通过字符串文字访问对象（无字符串文字）”

this.crud = data['msg'];

我的班级：

export class CrudClass 
    public id?: string;
    public  name: string;
    public email: string;
    public password: string;

我的组件：

export class ListComponent implements OnInit 
    private crud: CrudClass[];

    constructor(private router: Router, private apiRoutes: ApiRoutesService)  

    ngOnInit() 
        this.readApp();
    

    readApp() 
        this.apiRoutes.readApp().subscribe(
            data => 
                console.log(data);
                this.crud = data['msg'];
            ,
            error => 
                console.log(error);
            
        );
    

【问题讨论】：

我将在 ApiRouteService 中创建一个接口，其中包含您需要访问的值，并将 readApp() （服务中）的返回类型定义为该类型的可观察对象。然后您可以通过点符号访问它。检查此示例：stackblitz.com/edit/angular-npvara

【参考方案1】：

你可以通过多种方式做到这一点

首先禁用规则

/* tslint:disable:no-string-literal */
 this.crud = data['msg'];
/* tslint:enable:no-string-literal */

其次使用变量而不是字符串文字

改变

this.crud = data['msg'];

到

let key='msg';
this.crud = data[key];

或者在tslint.config.json中全局设置no-string-literal: false

Related SO post

【讨论】：

你应该禁用tslint.json文件中的规则no-string-literal: false，除此之外我同意！

@MoHiTPaNdEy 你试过哪一个，你能显示更新后的代码吗

【参考方案2】：

您可以尝试将 let 对象设置为一个值并将其设置为 data 属性

喜欢

let dataKey='msg';
this.crud = data[dataKey]