How do I display candidate's full name inside job application which is inside job offer from AP-CodePudding

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

I'm using Angular's drag and drop module:

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

This is what i tried so far, I'm getting the error:

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

I also tried accessing it using this:

<div  *ngFor="let candidate of job.jobApplications.candidate;">

CodePudding user response：

jobApplications is an array, which is iterable, so *ngFor will work. job.candidate is an object which can be accessed directly by property e.g job.candidate.fullName or iterating over obj candidate's properties using keyvalue pipe.

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

CodePudding user response：

Inside your 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;
      }
    )
  }
}

And in your component.html:

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

Make sure you adapt my solution to your code. This will probably won't work because you have shown nothing of your code, but I think it will be simple to adapt. If you are not using any service, just call the method instead the service.