Html 在不同的标记中显示数组元素

我想在一个对象上循环并在不同的标记中显示每个对象

例如，如果我有这个数组：

x = [{'a': 1, 'b': 2}, {'a': 3, 'b': 4}]

我想显示如下内容：

first: 1
second: 2

first: 3
second: 4

我试过这个：

<ng-container *ngFor="let p of x">
    <div>
        <label for="recipient-a" class="col-form-label">first:</label>
        <input class="form-control" id="recipient-a" type="text" name="a" #name="ngModel" [(ngModel)]="p.a">
    </div>

    <div>
        <label for="recipient-b" class="col-form-label">second:</label>
        <input class="form-control" id="recipient-b" type="text" name="b" #name="ngModel" [(ngModel)]="p.b">
    </div>
</ng-container>

如何修改代码以实现我想要的？谢谢你抽出时间

请试试这个

<ng-container *ngFor="let p of x;">
    First: {{p.a}}
    <input class="form-control" type="text" [(ngModel)]="p.a">
    Second: {{p.b}}
    <input class="form-control" type="text" [(ngModel)]="p.b">
</ng-container>

第一：{p.a}
第二：{p.b}

第一：{p.a}
第二：{p.b}

<ng-container *ngFor="let p of x;">
    First: {{p.a}}
    <input class="form-control" type="text" [(ngModel)]="p.a">
    Second: {{p.b}}
    <input class="form-control" type="text" [(ngModel)]="p.b">
</ng-container>

<ng-container *ngFor="let p of x">
  <div>
    <label for="recipient-a" class="col-form-label">first:{{p.a}}</label>
    <input class="form-control" id="recipient-a" type="text" name="a" #name="ngModel" [(ngModel)]="p.a">
  </div>

  <div>
    <label for="recipient-b" class="col-form-label">second:{{p.b}}</label>
    <input class="form-control" id="recipient-b" type="text" name="b" #name="ngModel" [(ngModel)]="p.b">
  </div>