Bdtjtk

I have the id of a record that I'm sending with an HTTP GET call, so I can show that record in a form, edit it, then HTTP PUT to update. I think my GET call to the API works ok, as I can see the correct object in the console Network Preview, and 200 status. But it is not an array, so I can't figure out how to show this object in the HTML.

If I try to use an array variable and *ngFor..., I get this error...

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

If I use a regular variable of type any, there is no error, but no data binding in the HTML inputs.

Is there a way to change the service call to return an array, or another solution? API Back end is .NET Core.

This is what the object coming in looks like...

{classTimeSubjectsID: 3, classTimeSubjectsName: "English", 

classTimeSubjectsType: "D",…}

classTimeSubjectsID: 3

classTimeSubjectsName: "English"

classTimeSubjectsStatus: "A"

classTimeSubjectsType: "D"

Here is HTML...

  <form (ngSubmit)="onSubmit(updateSubject)" #updateSubject="ngForm">

   <div *ngFor="let sub of editSubject" class="col-sm-5 form-group">

      <label for="name">Subject Name</label>      

 <input type="text" id="ClassTimeSubjectsName" class="form-control" 

      name="ClassTimeSubjectsName" value="classTimeSubjectsName" 

#classTimeSubjectsName="ngModel" [(ngModel)]="sub.classTimeSubjectsName" [(ngModel)]="ClassTimeSubjectsName"> 

Here is the service...

 public getOneSubject(id: number) {

  return this.http.get(`${this.accessPointUrl}/${id}`, {headers: 

this.headers});}

Here is the component.ts...

export class AdminSubjectDetailsComponent implements OnInit {



  public editSubject: Array<any>;

// also tried....

public editSubject: any;





  constructor(private route: ActivatedRoute,

    private router: Router,

    private location: Location,

    private dataAdminService: DataAdminService) {

      const id = +this.route.snapshot.paramMap.get('id');

      dataAdminService.getOneSubject(id).subscribe((importSubject: any) => 

this.editSubject = importSubject);

      console.log('edit sub ' + this.editSubject);

 }

Maybe I misunderstood. Why don't you just wrap it in an array? like:

this.editSubject = [ importSubject ]

If you're unsure wether importSubject is an array or not:

if (!Array.isArray(importSubject)){

    this.editSubject = [ importSubject];

} else {

    this.editSubject = importSubject;

}

i have created something like this before
Hope it helps

    <div class="container">

  <main class="col-12">

<h3 class="bd-title" id="content">Dirty Check Example</h3>

<br/>

<form [formGroup]="editForm" (ngSubmit)="onSubmit()" >

<div class="form-group">

    <label>Id</label>

    <input   value="{{data.emp.id}}" type="text" formControlName="id" class="form-control"  />

</div>

<div class="form-group">

    <label>Name</label>

    <input   value="{{data.emp.name}}" type="text" formControlName="name" class="form-control"  />

</div>

<div class="form-group">

    <label>Designation</label>

    <input   value="{{data.emp.designation}}" type="text" formControlName="designation" class="form-control"  />

</div>

<button [disabled]="!(editForm.valid ||!editForm['isDirty']())" class="btn btn-primary">Update</button>

</form> 

</main></div>

ts file

editForm: FormGroup;



constructor(

    public dialogRef: MatDialogRef<EmployeeComponent>,

    @Inject(MAT_DIALOG_DATA) public data: any,

    private service: EmployeeService

  ) {}



  ngOnInit() {

    this.editForm = new FormGroup({

      id: new FormControl({ disabled: true }, Validators.required),

      name: new FormControl("", [

        Validators.required,

        Validators.pattern(

          /^[A-Za-z]{1,16}([ ]?[a-zA-Z]{0,16})([ ]?[a-zA-Z]{0,16})$/

        )

      ]),

      designation: new FormControl("", [

        Validators.required,

        Validators.pattern(

          /^[A-Za-z]{1,16}([ ]?[a-zA-Z]{0,16})([ ]?[a-zA-Z]{0,16})$/

        )

      ])

    });

  }



 onSubmit() {

    console.log(this.editForm.value);

    this.service.updateEmployee(this.editForm.value).subscribe(

      data => {

        this.dialogRef.close();

      },

      err => {

        console.log(err);

      }

    );

  }

  close() {

    this.dialogRef.close();

  }

Stackblitz Link