如何在angular 4中使用ngFor动态渲染svg

在 Angular 4 中，可以使用 ngFor 指令动态渲染 SVG 图形。下面是一份完善且全面的答案：

使用 ngFor 动态渲染 SVG 的步骤如下：

1. 首先，确保已经安装并配置好 Angular 4 的开发环境。
2. 创建一个新的 Angular 4 项目，可以使用 Angular CLI（命令行界面）来快速搭建一个项目。
3. 打开项目中的组件文件（通常是以 .component.ts 结尾），在组件的类中定义一个数组，用于存储需要动态渲染的 SVG 数据。

export class AppComponent {
  svgData = [
    { name: 'SVG1', url: 'path/to/svg1.svg' },
    { name: 'SVG2', url: 'path/to/svg2.svg' },
    { name: 'SVG3', url: 'path/to/svg3.svg' },
    // 添加更多的 SVG 数据...
  ];
}

1. 在组件的 HTML 模板中，使用 ngFor 指令遍历 SVG 数据，并使用 ng-include 或 object 标签来加载 SVG 文件。

<svg *ngFor="let svg of svgData" width="100" height="100">
  <ng-container *ngIf="svg.url.endsWith('.svg')">
    <ng-container *ngIf="svg.url.startsWith('http')">
      <object type="image/svg+xml" data="{{svg.url}}"></object>
    </ng-container>
    <ng-container *ngIf="!svg.url.startsWith('http')">
      <ng-include src="svg.url"></ng-include>
    </ng-container>
  </ng-container>
</svg>

在上面的示例中，通过 *ngFor="let svg of svgData" 遍历 svgData 数组中的每个 SVG 数据对象，并在 SVG 元素中使用 ng-container 结构来根据 SVG 文件的路径和类型动态加载 SVG 图形。

请注意，如果 SVG 文件路径是一个远程 URL（以 http 开头），则使用 object 标签，并设置 data 属性为 SVG 文件的 URL。如果 SVG 文件路径是相对路径或者本地文件路径，使用 ng-include 指令，并设置 src 属性为 SVG 文件的路径。

以上就是在 Angular 4 中使用 ngFor 动态渲染 SVG 的方法。

在腾讯云中，腾讯云对象存储（COS）是一项适用于存储、处理和访问大量非结构化数据的分布式存储服务。您可以使用腾讯云对象存储（COS）来存储 SVG 文件，并在上述示例中将 SVG 文件的 URL 替换为腾讯云对象存储（COS）的访问地址。

更多关于腾讯云对象存储（COS）的信息和产品介绍，可以访问以下链接地址：腾讯云对象存储（COS）