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

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

}

我正在将此表单项目发送给服务。反过来，服务通过其他服务和应用程序服务器将数据发送到数据库。一切都按预期工作。

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

这段代码是我从书上得到的，作者保存后没有要求return对象。我的案件需要这个对象。所以问题是 Service 做了它应该做的所有事情，但没有等到来自 subscribe 方法的 "i" 变量被推送到一个数组并附加到另一个变量。这些步骤发生但在 return 语句将被调用之后。所以我无法从 Component 中的 db 接收保存的对象。

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

假设，我应该在这里写一个回调函数，但是我不知道怎么办。
或者可能还有另一个决定，更多优雅的？结果，我需要 return 将保存的项目返回到 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

您需要 return 一个 observable 而不是服务的订阅。您可以在服务中使用 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);
    });

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

How to fetch all data from ngFor? Is any restrictions for fetching data into table with ngFor?

javascript

angular

typescript

rxjs

asynccallback