如何从ngFor获取所有数据？ 使用ngFor将数据提取到表中是否有任何限制？

Question

我有一个应通过服务在数据库中创建记录的组件。

@Component({
  selector: 'app-add-company',
  templateUrl: './add-company.component.html',
  styleUrls: ['./add-company.component.css']
})
export class AddCompanyComponent implements OnInit {

formItem: Company = new Company();
savedItem: Company;
formGroup: FormGroup;

constructor(private companyService: CompanyService, private router: Router, private formBuilder: FormBuilder) {}

ngOnInit() {
    this.formGroup = this.formBuilder.group({
        publicName:new FormControl('', Validators.compose ([Validators.required, Validators.minLength(2)]))

    });


}

saveForm(item: Company) {

    this.savedItem = this.companyService.saveCompany(item);

    console.log("Print form object - log from component - : " + item)
    console.log("Print returned object from service - log from component - : " + this.savedItem)
    console.log("Print returned ID of object from service - log from component - : " + this.savedItem.id)

    if (this.savedItem.id) {
        console.log("New Company has been created with ID : " + this.savedItem.id + "and name : " + this.savedItem.publicName);}
    else console.log("Company hasn't been created");

    //this.router.navigateByUrl('lead/company/${this.savedItem.id}');

}

我正在将此表单项发送给服务。 反过来，服务通过其他服务和应用程序服务器将数据发送到DB。 一切正常。

@Injectable()
export class CompanyService {

itemUrl = "company";
object: Company = new Company();
private items: Company[] = new Array<Company>();
//private groups: string[] = [];

constructor(private repository: RestRepository) {
    repository.getAllData(this.itemUrl).subscribe(data => this.items = data );
}

getAllCompanies(): Company[] {
    return this.items;
}

saveCompany(item: Company) {
    if (item.id == undefined || item.id == null) {
        this.repository.saveData(this.itemUrl, item).subscribe(i => {
        this.items.push(i);

        this.object = i;
        console.log("Print a subscribed object - log from service - : " + this.object.publicName + "  ID " + this.object.id)

        });
        let pop = this.items.pop();
        console.log("Print an array with pop() - log from service - : " + pop.publicName + "  ID " + pop.id)


    } else {
        return this.repository.updateData(this.itemUrl, item).subscribe(i => {
            this.items.splice(this.items.findIndex(i => i.id == item.id), 1, item);
            this.items.push(i);
        });
    }
}

我从书中得到了这段代码，保存后作者没有要求返回对象。 我的案子需要这个物件。 因此，问题在于Service会做所有应做的事情，但不会等到订阅方法中的“ i”变量将被推送到数组并附加到另一个变量。 这些步骤已经发生，但是在return语句之后将被调用。 因此，我无法从Component内部的db接收保存的对象。

请您提示一下，我该如何正确编写此方法。

1. 假设，我不知何故应该在这里编写一个回调函数，但我不知道如何。
2. 也许还有另一个决定，更优雅？ 结果，我需要将已保存的项目返回给Component。

这是console.log（）。 在保存项目“ Apple Inc”之前，下一个项目是“ Stack Overflow”。

Print an array with pop() - log from service - : Apple Inc  ID 5929da7f7b99e80c09124859
add-company.component.ts:35 Print form object - log from component - : [object Object]
add-company.component.ts:36 Print returned object from service - log from component - : undefined
AddCompanyComponent.html:2 ERROR TypeError: Cannot read property 'id' of undefined
Print a subscribed object - log from service - : Stack Overflow   ID 5929dae37b99e80c0912485a

Answer 1

您需要从服务中返回可观察到的内容而不是订阅。 您可以在服务中使用do运算符来对items.push产生副作用。

更改

 return this.repository.updateData(this.itemUrl, item)
        .subscribe(i => {
          this.items.splice(this.items.findIndex(i => i.id == item.id), 1, item);
          this.items.push(i);
    });

至

return this.repository.updateData(this.itemUrl, item)
      .do(i => {
        this.items.splice(this.items.findIndex(i => i.id == item.id), 1, item);
        this.items.push(i);
    });