如何在 API 响应中的工作邀请中显示候选人的全名

Question

Components.ts:

ngOnInit(): void {
this.id = this.route.snapshot.params['jobId'];
this.jobService.findJobById(this.id)
.subscribe((data: JobOffer) =>{
  this.job = data;
  console.log(data);
});

我正在使用 Angular 的拖放模块：

<div cdkDropListGroup>
&nbsp;
<div class="example-container" *ngFor="let items of job.phaseT.items; index as i">
  <h3>{{items.phaseItem}} PHASE</h3>
  
            <div
            cdkDropList id="{{items.id}}" 
            [cdkDropListData]="items.phaseItem"
            class="item-list" 
            [cdkDropListConnectedTo]="connectedTo"
            (cdkDropListDropped)="drop($event)">
              <div class="example-box" *ngFor="let job of job.jobApplications" cdkDrag  [cdkDragData]="job">
                <div class="example-box" *ngFor="let candidate of job.candidate" cdkDrag  [cdkDragData]="job">
                   {{candidate.fullname}} --   {{job.appliedDate | date}} -
                  <button class="button btn-primary" [routerLink]="['/candidateProfile']">View Profile</button>
              </div>
              </div>
            </div>
        </div>
    </div>
</div>

这是我到目前为止所尝试的方法，我收到了错误：

Error: Cannot find a differ supporting object '[object Object]' of type 'object'. NgFor only supports binding to Iterables such as Arrays

我也试过用这个访问它：

<div class="example-container" *ngFor="let candidate of job.jobApplications.candidate;">

Answer 1

在你的component.ts里面：

export class YourComponent {
  title = 'YourTitle';
  name= '';

  constructor(private yourService: yourService) { }

  ngOnInit(): void {
    this.getName();
  }
  
  getName() {
    this.yourService.getApplicantName().subscribe(
     (data: any) => {
       this.name = data.jobApplications[0].candidate.fullName;
      }
    )
  }
}

在你的component.html中：

<h1>Full name: {{ name }} </h1>

确保您将我的解决方案应用到您的代码中。这可能不会起作用，因为您没有显示任何代码，但我认为它很容易适应。如果您没有使用任何服务，只需调用方法而不是服务。

Answer 2

jobApplications 是一个数组，它是可迭代的，所以 *ngFor 可以。 job.candidate 是一个可以通过属性直接访问的对象，例如 job.candidate.fullName 或使用 keyvalue 管道迭代 obj 候选对象的属性。

<div class="example-box" *ngFor="let job of jobApplications" cdkDrag  [cdkDragData]="job">
   {{job?.candidate?.fullname}} --   {{job?.appliedDate | date}} -
  <button class="button btn-primary" [routerLink]="['/candidateProfile']">View Profile</button>
</div>

如何在 API 响应中的工作邀请中显示候选人的全名

How do I display candidate's full name inside job application which is inside job offer from API response

angular