使用 *ngFor 创建一个模板，该模板将表单的信息作为一个整体收集，而不是关于角度的单独信息

我有这个代码：

import { Component, OnInit } from '@angular/core';
import { NgForm, FormsModule} from '@angular/forms';
@Component({
    selector: 'app-adm',
    // templateUrl: './adm.component.html',
    template: `<form #f="ngForm" (submit)="form_submit(f)">
        <input ngModel name="nomeEmpresa" placeholder="Nome da empresa" type="text"><br>
        <input ngModel name="atuacao" placeholder="Ramo de atuação" type="text"><br>
        <input ngModel name="vagas" placeholder="Numero de vagas" type="number"><br>
        <input ngModel name="salario" placeholder="Salário" type="number"><br>
        <input ngModel name="descricao" placeholder="Descrição da vaga" type="text" ><br>
        <button type="submit">Lançar vaga</button>
    </form>
    <div>
        <h1 *ngFor="let p of addItem">{{p.Empresa}}</h1>
        <p *ngFor="let p of addItem">{{p.Atuacao}}</p>
        <p *ngFor="let p of addItem">{{p.Vagas}}</p>
        <p *ngFor="let p of addItem">{{p.Salario}}</p>
        <p *ngFor="let p of addItem">{{p.Descricao}}</p>
    </div>
    <app-leitura><app-leitura>
    `,
    styleUrls: ['./adm.component.css']
})
export class FormItemSubmit implements OnInit {
    addItem: Array<any>;
    constructor(){}
    ngOnInit(){
        this.addItem = new Array<any>();
    }
    form_submit(f:NgForm){
        this.addItem.push({
            Empresa: f.form.controls.nomeEmpresa.value,
            Atuacao: f.form.controls.atuacao.value,
            Vagas: f.form.controls.vagas.value,
            Salario: f.form.controls.salario.value,
            Descricao: f.form.controls.descricao.value,
        });
        console.log(this.addItem);
    }
}

我的意图是将输入信息显示为一个组，如我的输出示例所示：

例子1

示例1.0

1
    1.1

    as a whole

（现在对于第二个输入，应该是这样的）

例子2

示例2.0

2
2.1
as a whole

因此，每次按下按钮时，它都会创建一个新的整个表单输出，这些输出一起显示，但我得到的是以下输出：

example1
example2
example1.0
example2.0

1

2

1.1

2.1

as a whole

as a whole

它显示为组，但不是在表单输入之间进行分隔，而是由 {{p.something }} 分隔。任何解决方案？

PS：对不起，如果我没有表达我的问题，英语不是我的第一语言