亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

當我從 API 檢索數據但它在 Angular 中顯示為對象時

當我從 API 檢索數據但它在 Angular 中顯示為對象時

湖上湖 2023-08-05 19:24:31
當我從 API 檢索數據時,會顯示“名字”和“姓氏”值。但“jobTitle”值未顯示在表中,但它在控制臺框中顯示為數組。請幫我解決這個問題這是visibility.ts文件:export class VisibilityComponent implements OnInit {  pmDetails1: IEmployee[];  constructor(private userService: UserService) {}  ngOnInit() {    this.userService.getAllUsers().subscribe((pmDetails1: IEmployee[]) => {      this.pmDetails1 = pmDetails1;       console.log(pmDetails1);       console.log(pmDetails1[0].jobTitle);    });  }}這是 HTML 文件<div>          <cdk-virtual-scroll-viewport itemSize="50" class="dialogbox-viewport">            <table class="table table-light" style="border: 1px solid">              <thead style="background-color: aqua">                <tr>                  <th>Select</th>                  <th>Name</th>                  <th>Role</th>                </tr>              </thead>              <tbody>                <tr *ngFor="let p of pmDetails1">                  <td>                    <input type="checkbox" value="{{p.firstName}}" (change) = "onSelectedEmployee($event)" [checked]="check" />                   </td>                  <td>{{ p.firstName }} {{ p.lastName }}</td>                  <td>{{ p.jobTitle }}</td>                </tr>              </tbody>            </table>          </cdk-virtual-scroll-viewport>        </div>這是IEmployee.ts文件export interface IEmployee {    userId: any;    firstName: string;    jobTitle: any;    lastName: String;}這是輸出:![在此輸入圖像描述][1]這是“console.log(pmDetails1)”![在此輸入圖像描述][2]這是“console.log(pmDetails[0].jobTitles)”我想在表的“角色”列中顯示 jobTitlesName。我是 Angular 的初學者。請幫我做
查看完整描述

3 回答

?
慕田峪9158850

TA貢獻1794條經驗 獲得超7個贊

在您的 HTML 文件中使用它。

<td>{{ p.jobTitle.jobTitleName }}</td>


查看完整回答
反對 回復 2023-08-05
?
子衿沉夜

TA貢獻1828條經驗 獲得超3個贊

代碼中的所有內容都沒有問題,唯一的問題是該屬性jobTitle是Object


您有 3 個可用選項(或更多)


選項1

從后端以字符串形式返回值;這意味著我們可以將您的界面修改為


    export interface IEmployee {

        userId: any;

        firstName: string;

        jobTitle: string;

        lastName: String;


    }

選項2

更改接口以反映Object來自后端的


    export interface IEmployee {

        userId: any;

        firstName: string;

        jobTitle: { jobTitleName: string; jobTitleId: number };

        lastName: String;


    }

現在您可以在您的 html 中使用它,如下所示。這種方法已由@shehanpathirathna 闡述


<td>{{ p.jobTitle.jobTitleName }}</td>

選項3

用于map生成具有所需結構的新對象


    import { map } from 'rxjs/operators';

    export class VisibilityComponent implements OnInit {

      pmDetails1: IEmployee[];


      constructor(private userService: UserService) {}


      ngOnInit() {

        this.userService.getAllUsers().pipe(

           map(employeea => employees.map(

              (employee) => ({...employee, jobTitle: jobTitle.jobTitleName })

           ))

        ).subscribe((pmDetails1: IEmployee[]) => {

          this.pmDetails1 = pmDetails1;

           console.log(pmDetails1);

           console.log(pmDetails1[0].jobTitle);

        });

      }

    }

對于這種特定情況,此選項可能有點過大,但如果對象變得更復雜,則可能非常有幫助


查看完整回答
反對 回復 2023-08-05
?
有只小跳蛙

TA貢獻1824條經驗 獲得超8個贊

嘗試這個 :


export class VisibilityComponent implements OnInit {

  pmDetails1: IEmployee[];

  constructor(private userService: UserService) {}

  ngOnInit() {

    this.userService.getAllUsers().subscribe(data => {

      this.pmDetails1 = data;

       console.log(pmDetails1);

       console.log(pmDetails1[0].jobTitle);

    });

  }

}


查看完整回答
反對 回復 2023-08-05
  • 3 回答
  • 0 關注
  • 165 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號