在角13,我想提供的属性

Question

在Angular13应用程序中的一个html文件中，我使用了一个元素，我想通过Angular {{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数据文件读取这些值

    <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社交按钮输出以下内容:

• 唽
• • 所属分类：双推特
  • href： https://twitter.com/wmmaintz
  • svg.xmlns： http://www.w3.org/2000/svg
  < li>svg.height: 16
  < li>svg.width: 16
  <李> svg。viewBox: 0 0 16 16李< / >
  <李> svg。李填补:cornflowerblue < / >
  <李>字符串:李< / >
  < Li > xmlns = " http://www . w3 . org/2000/SVG " width = " 16 " height = " 16 " class = "毕比-Twitter " o fill = " corn flower blue " view box = " 0 0 16 16 "
  <李>“m 5.026 15c 6.038 0 9.341-5.003 9.341-9.334 0-.14 0-.282-.006-.

  正如人们所看到的，我还尝试将所有属性组合成两个长字符串，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>
  

  它也会产生一个错误。然后，我尝试使用< code >

              <svg>
                  <use xlink:xlink="socBtnSvgs[i]"/>
                  <path d="socBtnPths[i]"/>
              </svg>
  

  但这仍然会产生一个错误，尽管这是一个更令人鼓舞的错误：

  platform-browser.mjs：605 Error： attribute d： Expected moveto path command （'M' or 'm'）， “socBtnPths[i]”.

  我发现这更鼓励虽然它是什么

  所以,我亏本,接下来试着什么。有什么想法啊

Answer 1

复制参考提供的是有帮助的:我

最终结果如下：

            <svg
                 [attr.xmlns]="socBtn.xmlns"
                 [attr.width]="socBtn.width"
                 [attr.height]="socBtn.height"
                 [attr.fill]="socBtn.fill"
                 [attr.class]="socBtn.clss"
                 [attr.viewBox]="socBtn.viewBox">
                <path [attr.d]="socBtn.pathD"/>
            </svg>

非常感谢！