第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號(hào)安全,請(qǐng)及時(shí)綁定郵箱和手機(jī)立即綁定
已解決430363個(gè)問題,去搜搜看,總會(huì)有你想問的

當(dāng)我從 API 檢索數(shù)據(jù)但它在 Angular 中顯示為對(duì)象時(shí)

當(dāng)我從 API 檢索數(shù)據(jù)但它在 Angular 中顯示為對(duì)象時(shí)

湖上湖 2023-08-05 19:24:31
當(dāng)我從 API 檢索數(shù)據(jù)時(shí),會(huì)顯示“名字”和“姓氏”值。但“jobTitle”值未顯示在表中,但它在控制臺(tái)框中顯示為數(shù)組。請(qǐng)幫我解決這個(gè)問題這是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 的初學(xué)者。請(qǐng)幫我做
查看完整描述

3 回答

?
慕田峪9158850

TA貢獻(xiàn)1794條經(jīng)驗(yàn) 獲得超7個(gè)贊

在您的 HTML 文件中使用它。

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


查看完整回答
反對(duì) 回復(fù) 2023-08-05
?
子衿沉夜

TA貢獻(xiàn)1828條經(jīng)驗(yàn) 獲得超3個(gè)贊

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


您有 3 個(gè)可用選項(xiàng)(或更多)


選項(xiàng)1

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


    export interface IEmployee {

        userId: any;

        firstName: string;

        jobTitle: string;

        lastName: String;


    }

選項(xiàng)2

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


    export interface IEmployee {

        userId: any;

        firstName: string;

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

        lastName: String;


    }

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


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

選項(xiàng)3

用于map生成具有所需結(jié)構(gòu)的新對(duì)象


    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);

        });

      }

    }

對(duì)于這種特定情況,此選項(xiàng)可能有點(diǎn)過大,但如果對(duì)象變得更復(fù)雜,則可能非常有幫助


查看完整回答
反對(duì) 回復(fù) 2023-08-05
?
有只小跳蛙

TA貢獻(xiàn)1824條經(jīng)驗(yàn) 獲得超8個(gè)贊

嘗試這個(gè) :


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);

    });

  }

}


查看完整回答
反對(duì) 回復(fù) 2023-08-05
  • 3 回答
  • 0 關(guān)注
  • 164 瀏覽
慕課專欄
更多

添加回答

舉報(bào)

0/150
提交
取消
微信客服

購課補(bǔ)貼
聯(lián)系客服咨詢優(yōu)惠詳情

幫助反饋 APP下載

慕課網(wǎng)APP
您的移動(dòng)學(xué)習(xí)伙伴

公眾號(hào)

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號(hào)