如何基于字符串值在Angular中创建表？

我正在使用Angular 4/5，我必须基于字符串值在Angular中创建多个表。这是我创建表的模型。

class NameValuePair {
    Name: string;
    Value: string;
}

export class Family {
    Properties: Array<NameValuePair>;
    PropertyType: string;
}

下面给出的是表将包含的硬编码值。

export const list1: Family[] =
[
    {
      Properties: [
        {
          Name: "A",
          Value: "1"
        },

        {
          Name: "B",
          Value: "2"
        },
        {
          Name: "C",
          Value: "3"
        }
      ],
      PropertyType: "Type 1"
    },
    {
      Properties: [
        {
          Name: "A",
          Value: "10"
        },

        {
          Name: "B",
          Value: "20"
        },
        {
          Name: "C",
          Value: "30"
        }
      ],
      PropertyType: "Type 1"
    },
    {
      Properties: [
        {
          Name: "A",
          Value: "100"
        },

        {
          Name: "B",
          Value: "200"
        },
        {
          Name: "C",
          Value: "300"
        }
      ],
      PropertyType: "Type 2"
    }
  ]

现在，这里要注意的主要事情是将根据PropertyType创建表。与上面的结构一样，数组的前两个元素的PropertyType相同，即Type 1，因此将创建2个表。一个带有标题/标题：类型1，另一个带有标题/类型2。第二个数组元素的properties []数组将成为第一个表的第二行。我找不到有关如何基于此PropertyType字符串值创建表的逻辑。但是，这就是我在component.html文件中编写的内容，但是这种逻辑是不正确的。

<div class="container pt-4" *ngFor="let element of list;let i = index">
  <ng-container *ngIf="list[i].PropertyType == list[i+1].PropertyType">
    <div style="padding-left:250px;font-size: 20px" class="pb-2">{{element.PropertyType}}</div>

    <table id="{{element.PropertyType}}" class="table table-striped table-bordered table-responsive pb-3 mx-auto">
      <thead style="height:40px">
        <tr align="center">
          <th *ngFor="let property of element.Properties" style="font-size: 20px">{{property.Name}}</th>
        </tr>
      </thead>

      <ng-container *ngFor="let element1 of list">
          <tr align="center" *ngIf="element.PropertyType == element1.PropertyType">
            <td *ngFor="let property of element1.Properties; let propertyIndex = index" style="width: 200px">
              <ng-container [ngSwitch]="propertyIndex">         
                <div *ngSwitchDefault style="font-size: 20px">{{property.Value}}</div>
              </ng-container>
            </td>
          </tr>
      </ng-container>
    </table>
  </ng-container>
</div>

这里的list指的是如上所述的list1 const数组。请帮忙。