如何以角度重命名对象键答案

【问题标题】：How to rename object key in angular如何以角度重命名对象键
【发布时间】：2020-10-27 16:44:31
【问题描述】：

我得到一个像这样的对象：

在网页上看起来像这样：

我想删除“_”，它应该是这样的：

Is Supplier? (toggle)   Is Customer?  (toggle)   Is Cashbook AC?  (toggle) ,etc..

.ts 代码

getCompanyConfig() {
        this.companiesService.companyConfig({page: -1}).subscribe(data => {
            this.companyToggleArr = data.items;
            console.log(this.companyToggleArr)           
        });
    }

.html

<mat-grid-list cols="5" rowHeight="100px">
            <mat-grid-tile class="ml-1 mr-1" *ngFor="let companyToggle of companyToggleArr; let i = index">
                <div fxLayout="row" fxLayoutAlign="start start">
                    <mat-label style="margin-right: 20px">{{companyToggle.name}}</mat-label>
                    <mat-slide-toggle [(ngModel)]="companyToggle.name" name="{{'name' + i}}"></mat-slide-toggle>
                </div>
            </mat-grid-tile>
        </mat-grid-list>

【问题讨论】：

标签： angular typescript angular-material angular6 angular8

【解决方案1】：

只需使用 Array.map 函数修改每个名称值：

this.companyToggleArr = data.items.map(companyToggle => {
 companyToggle.name = companyToggle.name.replace('_', ' ') + '?';

 return companyToggle;
})

并为您的标签使用 CSS 将第一个字母大写：

.label {
    text-transform: capitalize; // capitalizes the first letter of each word in the selected text.
}

【讨论】：

"Cannot read property 'replace' of undefined" 错误获取
@aashu1807 - 因为名字后面有 ele 会导致问题，你可以试试这个 - companyToggle.name.replace('_', ' ') + '?'
@aashu1807 抱歉打错了，已经修复了，有不必要的字段名
@DmitrySobolevsky 如何将这些值作为参数传递给后端？
@DmitrySobolevsky 在打开和关闭它隐藏标签并给出“真”和“假”之后

【解决方案2】：

用标签创建一个辅助数组

 labels:string[]
 this.companiesService.companyConfig({page: -1}).subscribe(data => {
        this.companyToggleArr = data.items;
        this.labels=data.items.map(x=>"Is "+x.name.split('_')[1]
    });

并使用

 <mat-label style="margin-right: 20px">{{labels[i]}}</mat-label>

【讨论】：

用于添加“？”我写了 this.labels=data.items.map(x=>"Is "+x.name.split('_')+"?"[1]) 但没有得到
@aashu1807，当我进行 split('_') 时，我创建了一个数组，例如for is_supplier: ['is','supplier'] 这是我得到数组第二个元素的原因，我想你想说map(x=>("Is "+x.name.split('_')[1]+"?")) 我不知道是否需要括号

【解决方案3】：

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

你可以创建pipe。专门设计用于从字符串中删除任何“_”

你可以使用我不推荐的简单功能。

给你的管道从 '@angular/core' 导入 { Pipe, PipeTransform };

@Pipe({
  name: 'companyName'
})
export class CompanyNamePipe implements PipeTransform {

  transform(value: string, args?: any): any {
    return value.replace('_', " ");
  }

}

// template
    <mat-label style="margin-right: 20px">{{companyToggle.name | companyName }}</mat-label>

【讨论】：

Angular JIT 编译失败：'@angular/compiler' 未加载！错误获取