Question

我具有要通过HTTP GET调用发送的记录的ID，因此我可以以表格形式显示该记录，对其进行编辑，然后通过HTTP PUT进行更新。我认为我对API的GET调用工作正常，因为我可以在控制台Network Preview中看到正确的对象以及200状态。但这不是数组，因此我不知道如何在HTML中显示此对象。
如果我尝试使用数组变量和* ngFor ...，则会收到此错误...

错误：找不到类型为“对象”的其他支持对象“ [对象对象]”。 NgFor仅支持绑定到数组等Iterable。

如果我使用任何类型的常规变量，则不会出现错误，但是HTML输入中没有数据绑定。

是否可以更改服务调用以返回数组或其他解决方案？ API后端是.NET Core。

这就是进来的对象的样子……

{classTimeSubjectsID: 3, classTimeSubjectsName: "English", 
classTimeSubjectsType: "D",…}
classTimeSubjectsID: 3
classTimeSubjectsName: "English"
classTimeSubjectsStatus: "A"
classTimeSubjectsType: "D"

这是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">

这是服务...

 public getOneSubject(id: number) {
  return this.http.get(`${this.accessPointUrl}/${id}`, {headers: 
this.headers});}

这是组件。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);
 }

Answer 1

也许我误会了。您为什么不将其包装在数组中？喜欢：

this.editSubject = [ importSubject ]

如果您不确定importSubject是否为数组：

if (!Array.isArray(importSubject)){
    this.editSubject = [ importSubject];
} else {
    this.editSubject = importSubject;
}

Answer 2

我以前创建过类似的东西希望对您有帮助

    <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文件

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

在Angular 6的http GET输入字段中显示对象

2 个答案: