【发布时间】：2022-02-19 07:30:02
【问题描述】：
在 Angular13 应用程序的一个 html 文件中，我正在使用一个元素，我想通过 Angular {{value of attribute}} 的双重绑定方法提供属性列表及其值，所以可以显示社交媒体图标列表。
例如，不要进行这种硬编码：
<!-- Twitter -->
<svg xmlns="http://www.w3.org/2000/svg"
width="16"
height="16"
fill="cornflowerblue"
class="bi bi-twitter"
viewBox="0 0 16 16">
<path d="M5.026 15c6.038 0 9.341-5.003 9.341-9.334 0-.14 0-.282-.006-.422A6.685 6.685 0 0 0 16 3.542a6.658 6.658 0 0 1-1.889.518 3.301 3.301 0 0 0 1.447-1.817 6.533 6.533 0 0 1-2.087.793A3.286 3.286 0 0 0 7.875 6.03a9.325 9.325 0 0 1-6.767-3.429 3.289 3.289 0 0 0 1.018 4.382A3.323 3.323 0 0 1 .64 6.575v.045a3.288 3.288 0 0 0 2.632 3.218 3.203 3.203 0 0 1-.865.115 3.23 3.23 0 0 1-.614-.057 3.283 3.283 0 0 0 3.067 2.277A6.588 6.588 0 0 1 .78 13.58a6.32 6.32 0 0 1-.78-.045A9.344 9.344 0 0 0 5.026 15z"/>
</svg>
我想这样做：
<svg xmlns="{{socBtn.xmlns}}"
width="{{socBtn.width}}"
height="{{socBtn.height}}"
fill="{{socBtn.fill}}"
class="{{socBtn.clss}}"
viewBox="{{socBtn.viewBox}}">
<path d="{{socBtn.pathD}}"/>
</svg>
但我不断收到以下错误消息：
错误 NG8002：无法绑定到“xmlns”，因为它不是“:svg:svg”的已知属性。 xmlns="{{socBtn.xmlns}}"
我为想要显示的社交按钮列表创建了一个模型界面，如下所示：
export interface SocialButton {
btnName: String;
href: String;
xmlns: String;
width: number;
height: number;
fill: String;
clss: String;
viewBox: String;
pathD: String;
}
我正在从 JSON 数据文件中读取这些值。所有这些都按预期工作，我可以使用简单的 *ngFor 循环来显示我想要显示的社交按钮的内容：
<ul>
<li *ngFor="let socBtn of socBtns">
<a class="ml-2 {{socBtn.clss}}"
target="_blank"
href="{{socBtn.href}}"
title="{{socBtn.btnName}}">
{{socBtn.btnName}}
</a>
<ul>
<li>class: {{socBtn.clss}}</li>
<li>href: {{socBtn.href}}</li>
<li></li>
<li>svg.xmlns: {{socBtn.xmlns}}</li>
<li>svg.height: {{socBtn.height}}</li>
<li>svg.width: {{socBtn.width}}</li>
<li>svg.viewBox: {{socBtn.viewBox}}</li>
<li>svg.fill: {{socBtn.fill}}</li>
<li></li>
<li>Full Strings:</li>
<li>svg {{ socBtnSvgs[i] }}</li>
<li>path {{socBtnPths[i]}}</li>
</ul>
</li>
</ul>
循环为 Twitter 社交按钮输出以下内容：
- 推特
-
- 类：bi bi-twitter
-
- svg.xmlns: http://www.w3.org/2000/svg
-
- svg.height: 16
-
- svg.width: 16
-
- svg.viewBox: 0 0 16 16
-
- svg.fill: 矢车菊蓝
-
- 完整字符串：
-
- xmlns="http://www.w3.org/2000/svg" width="16" height="16" class="bi bi-twitter" o fill="cornflowerblue" viewBox="0 0 16 16"
-
- "M5.026 15c6.038 0 9.341-5.003 9.341-9.334 0-.14 0-.282-.006-.422A6.685 6.685 0 0 0 16 3.542a6.658 6.658 0 0 1-1.889.5 3.301 3.301 0 0 0 0 1.447-1.817 6.533 6.533 0 0 0 1-2.087.793A3.286 3.286 3.286 0 0 0 0 0.875 6.03A9.325 9.325 9.325 0 0 1-6.767-3.429-3.429 .64 6.575v.045a3.288 3.288 0 0 0 2.632 3.218 3.203 3.203 0 0 1-.865.115 3.23 3.23 0 0 1-.614-.057 3.283 3.283 0 0 0 3.067 2.277A6.588 6.588 0 0 1 .78 13.58 a6.32 6.32 0 0 1-.78-.045A9.344 9.344 0 0 0 5.026 15z"
如您所见，我还尝试将所有属性组合成两个长字符串，socBtnSvgs[i] 和 socBtnPths[i]，这样我就可以这样使用它们：
<svg {{ socBtnSvgs[i] }}>
<path d={{ socBtn.pathD[i] }}/>
</svg>
这不会产生输出，开发者窗口中会出现以下错误：
ERROR DOMException: Failed to execute 'setAttribute' on 'Element': '{{' is not a valid attribute name.
当我将它更改为只使用不带双括号的变量名时：
<svg "socBtnSvgs[i]">
<path d="socBtnPths[i]"/>
</svg>
它也会产生错误。然后我尝试使用<use> 语句，以便我可以隔离路径语句并消除双括号：
<svg>
<use xlink:xlink="socBtnSvgs[i]"/>
<path d="socBtnPths[i]"/>
</svg>
但这仍然会产生错误，尽管这是一个更令人鼓舞的错误：
platform-browser.mjs:605 错误：属性 d：预期的移动路径命令（'M' 或 'm'），“socBtnPths[i]”。
我发现这更令人鼓舞，尽管它所抱怨的（它期望一个“M”，moveto 路径命令）实际上包含在 socBtnPths[0] 变量的内容中（“M5.026 15c6 . ..”）。
所以，我不知道接下来要做什么。关于如何将这些值与 svg 元素一起使用的任何想法？
【问题讨论】：
-
如果您将帖子缩小到一个问题，您更有可能得到答案？？？？
标签： html angular svg properties attributes