将JSON值映射到新字符串以使用Angular 10在HTML中显示

问题描述

我从后端得到这个示例JSON响应，即使用Spring Boot。 “类别”可以是1或2。 1个代表Notification，2个代表FAQ

{
"pageNumber": 0,"size": 5,"totalPages": 39,"content": [
    {
        "notifBaseId": {
            "notifId": "11115"
        },"notifLngCd": "en","title": "Test","ctt": lorem ipsum","category": "2",},

基于json响应，这是我使用ng g模型命令创建的角度模型

export class NotifBase {
notifID : string;
notifLngCd : string;
title : string;
ctt : string;
category : string;
}

这是服务。

import { Injectable } from '@angular/core';
import { HttpClient,HttpResponse } from '@angular/common/http';
import { Observable } from 'rxjs';
import { map } from 'rxjs/operators';
import { NotifBase } from '../model/notif-base';

@Injectable({
  providedIn: 'root'
})
export class NotifBaseService {
    
    private URL  = 'http://localhost:1001/api/notif/base';

    constructor ( private httpClient : HttpClient ) { }
    /** 
     * this is for default way for ngx-datatable 
     * 
     * */
    getNotifBaseList() : Observable<NotifBase[]> {
        return this.httpClient.get<GetResponse>(this.URL).pipe(
            map(response => response.content),);
    }

}

/*
This is for mapping the JSON endpoint
*/
interface GetResponse {
    content : [];
}

这是组件。

export class NotifBaseComponent implements OnInit {

//Table Rows
notifRows: NotifBase[];
// table Column 
notifColumns = [
    { name : 'NotifId',prop : 'notifBaseId.notifId'},{ name : 'Languange',prop : 'notifLngCd'},{ name : 'Notif title',prop : 'title'},{ name : 'Content',prop : 'ctt'},{ name : 'Category',prop : 'category},];
selected = [];
SelectionType = SelectionType;
ColumnMode = ColumnMode;

constructor( private notifBaseService: NotifBaseService ){
    
}

ngOnInit(){
    this.loadAll();
}

loadAll(){
    this.notifBaseService.getNotifBaseList().subscribe(
        data => {
            this.notifRows = data;
        }
    );
}

/**
 * This is for selected rows event
 */
onSelect({ selected }) {
    console.log('Select Event',selected,this.selected);
}
onActivate(event) {
    console.log('Activate Event',event);
}

}

在HTML即时消息上，使用swimlane ngx-datatable显示我的所有数据。

<!-- Ngx datatable  -->
    <ngx-datatable 
        class="material"
        [rows]="notifRows"
        [columnMode]="'standard'"
        [columns]="notifColumns"
        [headerHeight] ="50"
        [footerHeight]="50"
        [rowHeight]="50"
        [scrollbarH]="true"
        [scrollbarV]="true"
        [selected]="selected"
        [selectionType]="SelectionType.single"
        
    >
    </ngx-datatable>

使用我当前的代码，我的数据可以正确显示。 我不知道的一件事是如何映射/显示我的类别值 与其在浏览器中显示/渲染1或2，不如将它们显示为它们的名称（通知或FAQ）

解决方法

您可以修改映射响应以接收所需的内容，我会这样做：

getCategoryName(id: string): string {
    if (id === '1') {
        return 'Notification';
    }

    if (id === '2') {
        return 'FAQ';
    }

    return 'Unknown';
}

getNotifBaseList() : Observable<NotifBase[]> {
    return this.httpClient.get<GetResponse>(this.URL).pipe(
        map(response => {
            return response.content.map(item => ({
                ...item,category: this.getCategoryName(item.category)
            });
        }),);
}