Question

我想知道用多个不同值绑定属性的更简洁方法是什么。例如，border具有宽度，样式和颜色。如果我想绑定那些，我可以这样做：

   <img [src]="product.imageUrl"
               [title]="product.productName"
               [style.width.px]="imageWidth"
               [style.margin.px]="imageMargin"
               [style.border.px]="borderWidth"
               [style.border.color]="borderColor"
               [style.border.style]="borderStyle"
                />

模型将这些定义为：

  pageTitle: string = "Product List";
  imageWidth: number = 50;
  imageMargin: number = 2;
  borderWidth: number = 5;
  borderColor: string = "black";
  borderStyle: string = "solid";

将border数组绑定到属性似乎更简洁，如下所示：

    <img [src]="product.imageUrl"
               [title]="product.productName"
               [style.width.px]="imageWidth"
               [style.margin.px]="imageMargin"
               [style.border]="border"/>

模型为：

border: any[] = [2, "solid", "black"];

我无法将[style.border]设置为模型中的数组。我没有定义数字应该是px，并且最后两个属性是字符串，所以这可能是我的问题。

有什么更简洁的方法来解决这个问题？

Answer 1

问题是我没有使用正确的边框数组语法。用border: any[] = [2 ? 'solid' : 'black'];替换上一个边框数组，可以解决问题。

我在文档中找到了解决方案（当然）：https://angular.io/guide/template-syntax#ngStyle

我希望将来可以帮助其他人！

更清晰的方法来绑定具有多个角度5

1 个答案: