Как получить все данные из ngFor? Есть ли ограничения на получение данных в таблицу с помощью ngFor?

У меня есть Компонент, который должен создать запись в БД через Сервис.

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

Я получил этот код из книги, и автор не запрашивал возвращаемый объект после его сохранения. Мне нужен этот объект для моих дел. Итак, проблема в том, что Сервис делает все, что должен, но не ждет, пока переменная «i» из метода подписки будет помещена в массив и присоединена к другой переменной. Эти шаги произошли, но после того, как будет вызван оператор return. Поэтому я не могу получить сохраненный объект из базы данных внутри компонента.

Не могли бы вы подсказать, как мне правильно написать этот метод.

1. Предполагая, что я как-то должен написать здесь функцию обратного вызова, но я не знаю, как это сделать.
2. А может есть другое решение, более изящное? В результате мне нужно вернуть сохраненный элемент обратно в Component.

Это console.log(). Прежде чем я сохранил элемент «Apple Inc», следующим элементом было «Переполнение стека».

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