告诉我如何以角度显示 json 对象值？

苏哈斯瓦卡雷

我已经使用 angular 的 rest API 检索了数据。供您参考输出显示在屏幕截图中。我只想在表格形式中显示“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>

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

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

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

幸运儿

试试这个（.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>

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。