在Angular 7中根据所选内容动态添加列

在Angular 7中，可以根据所选内容动态添加列。以下是一个完善且全面的答案：

在Angular 7中，可以使用Angular的动态组件功能来实现根据所选内容动态添加列。动态组件允许我们在运行时动态地创建和销毁组件，这样就可以根据需要动态地添加或删除列。

首先，我们需要定义一个包含所选内容的数据模型。这个数据模型可以是一个数组，每个元素表示一个选项。例如，我们可以定义一个名为"selectedOptions"的数组，其中每个元素包含选项的名称和值。

接下来，我们可以使用Angular的ngFor指令来遍历"selectedOptions"数组，并为每个选项动态地创建列。在模板中，我们可以使用ngFor指令来遍历"selectedOptions"数组，并使用ng-container元素来包裹动态创建的列。在ng-container元素中，我们可以使用*ngComponentOutlet指令来动态地创建组件。

下面是一个示例代码：

<table>
  <thead>
    <tr>
      <th>Column 1</th>
      <th>Column 2</th>
      <th *ngFor="let option of selectedOptions">
        {{ option.name }}
      </th>
    </tr>
  </thead>
  <tbody>
    <tr *ngFor="let item of items">
      <td>{{ item.column1 }}</td>
      <td>{{ item.column2 }}</td>
      <td *ngFor="let option of selectedOptions">
        {{ item[option.value] }}
      </td>
    </tr>
  </tbody>
</table>

在上面的示例代码中，我们使用ngFor指令遍历"selectedOptions"数组，并为每个选项动态地创建一个<th>元素作为表头的列。在<tbody>中，我们使用ngFor指令遍历"items"数组，并为每个数据项动态地创建一个<td>元素作为表格内容的列。

需要注意的是，动态添加列可能会导致表格结构的变化，可能需要调整样式或其他相关的逻辑。

推荐的腾讯云相关产品和产品介绍链接地址：

• 腾讯云服务器（CVM）：提供可扩展的云服务器实例，适用于各种规模的应用程序和工作负载。了解更多信息，请访问：https://cloud.tencent.com/product/cvm
• 腾讯云数据库（TencentDB）：提供高性能、可扩展的数据库服务，包括关系型数据库和NoSQL数据库。了解更多信息，请访问：https://cloud.tencent.com/product/cdb
• 腾讯云函数计算（SCF）：无服务器计算服务，帮助开发者更轻松地构建和运行应用程序。了解更多信息，请访问：https://cloud.tencent.com/product/scf

请注意，以上推荐的腾讯云产品仅供参考，具体选择应根据实际需求和项目要求进行评估。