Question

我有一个组件，它应该通过服务在DB中创建记录。

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

我从书中得到了这个代码，作者在保存之后并没有要求返回对象。我的案子需要这个对象。所以问题是服务应该做的一切，但不要等到＃34; i＆＃34;来自subscribe方法的变量将被推送到一个数组并附加到另一个变量。这些步骤发生但在调用return语句之后。所以我无法从Component内的db接收保存的对象。

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

假设我在某种程度上应该在这里写一个回调函数，但是我不知道怎么做。
或许还有另一个决定，更多优雅？结果，我需要将保存的项目返回到Component。

这是console.log（）。在我保存项目＆＃34; Apple Inc＆＃34;之前，下一项是＆＃34; Stack Overflow＆＃34;。

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

您需要从服务返回一个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将数据提取到表中是否有任何限制？

1 个答案: