告诉我如何在 angular 中显示 json 对象值？

Question

我在 angular 中使用 rest API 检索了数据。供您参考，输出显示在屏幕截图中。我只想在 table 形式中显示 "classLevelPermissions"（参考 .html）。

.ts -

async getclp(className: string) {
    debugger;
   this.clplist = [];  
   this.className = className; 
    var kk1 = [];
    this.clpcollist = [];
    await this.rec.getclpdata(this.className).toPromise().then(result => {
      this.clplist.push(result);

    }, (error) => {
      alert("Failed" + error.message);
    });
  }

service.ts -

 getclpdata(className :string)
  {
      // console.log(className);


    const httpOptions = {
      headers: new HttpHeaders({
        'Content-Type': 'application/json',
        'X-Parse-Application-Id': configuration.PARSE_KEY,
        'X-Parse-Master-Key': configuration.PARSE_MASTER_KEY,
        // 'sessiontoken' : "r:92f65c2eb6c90c6aeaab713cf39ae491",

      })

    };
        return this.http.get<any>(this.geturl + className,httpOptions).pipe(
        map(result => {
          console.log(result);
          return result;
        })
      );
  }

.html -

<div class="modal-body modal-lg">
    <div class="row">
      <div class="col-md-12">
        <div class="table-responsive">
          <table class="table table-striped table-bordered table-hover table-checkable order-column valign-middle"
            id="example4">
            <thead>
              <tr>
                <th>Sr.No</th>
                <th>Role Name</th>
                <th>Find</th>
                <th>Get</th>  
                <th>Create</th>
                <th>Update</th>
                <th>Delete</th>
                <th>Action</th>
              </tr>
            </thead>
            <tbody>

              <tr *ngFor=" let res of clplist ; let i = index;">
                <td>{{i + 1}}</td>
                <td>{{res.result.classLevelPermissions.find}}</td>
                <td>{{res.result.classLevelPermissions.get}}</td>
                <td>{{res.result.classLevelPermissions.create }}</td>
                <td>{{res.result.classLevelPermissions.update }}</td>
                <td>{{res.result.classLevelPermissions.delete}}</td>
                <td class="center">
             <button class="btn btn-danger btn-sm" (click)="deleteDBField(rlist.fieldName)">
              <i class="fa fa-trash"></i></button>
               </td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>

请获取屏幕截图中显示的这一点输出，其中 'role:_superadmin' 不是静态值。我想要像下面这样的精确输出 -

   RoleName     |      Get    |     Find     | Create | Update | Delete
 _superadmin    | public, yes | public, yes  | yes    |  no    | yes

注意 - 当值为 "true" 时是，当值为 "false" 时否。并在 ['*' : true] 存在时打印 Public。

Answer 1

您可以使用管道将 true 或 false 值过滤为 Yes 或 No。可以在此处找到完整的工作示例 StackBlitz Link

您的 HTML 模板如下所示...

<table>
      <th *ngFor = "let row of data">
         {{getkeys(row)}}
      </th>
      <tr>
           <td *ngFor="let row of data index as i">{{ i === 0 ? row.roleName :  row[getkeys(row)].role | yesno }}</td>
      </tr>
</table>

你的是否管道是...

transform(value: any, args?: any): any {
  return value ? 'Yes' : 'No';
}

您的示例 JSON 组件中的对象数据是...

ngOnInit(){
this.data = [{roleName:"_superadmin"}, {
  create : {role: "true"}
},
{
  findd : {role: "true"}
},
{
  deletee : {role: true}
},
{
  gett : {role: true}
},
{
  update : {role: false}
}];

}
getkeys(data){
 return Object.keys(data);
}

Answer 2

试试这个（.ts 代码）

 await this.rec.getclpdata(this.className).toPromise().then(result => {
      var obj = {};
      var keyType = Object.keys(result.classLevelPermissions.delete)[0]; 
       obj['roleName'] = keyType.split(':',2)[1]; 
obj['find']= result.classLevelPermissions.find[keyType ]? "Yes" : "No";
obj['isFindPublic']= result.classLevelPermissions.find['*']? "public" : false;
obj['get']= result.classLevelPermissions.get[keyType ]? "Yes" : "No";
obj['isGetPublic']= result.classLevelPermissions.get['*']? "public" : false;
obj['create'] = result.classLevelPermissions.create[keyType ]? "Yes" : "No";
obj['update']= result.classLevelPermissions.update[keyType ]? "Yes" : "No";
obj['delete']= result.classLevelPermissions.delete[keyType ]? "Yes" : "No"; 
this.clplist.push(obj);

试试这个(.html)

<tr *ngFor=" let res of clplist">
                <td>{{$index + 1}}</td>
                <td>{{res.roleName}}</td>
                <td><span *ngIf="res.isFindPublic">{{res.isFindPublic}}{{","}}</span>{{res.find}}</td>
                <td><span *ngIf="res.isGetPublic">{{res.isGetPublic}}{{","}}</span>{{res.get}}</td>
                <td>{{res.create }}</td>
                <td>{{res.update }}</td>
                <td>{{res.delete}}</td>
                <td class="center">
             <button class="btn btn-danger btn-sm" (click)="deleteDBField(rlist.fieldName)">
              <i class="fa fa-trash"></i></button>
               </td>
              </tr>

告诉我如何在 angular 中显示 json 对象值？

tell me how to display json object values in angular?

parse-platform

typescript

angular