HTML / CSS的新手，在理解以下示例中发生的事情时，我有一个严重的漏洞。
我使用primeng构建了一个Angular应用，以实现外观。我有一个带有HTML的组件，其中包含primeNg个元素。
我注意到<p-dropdown [style]="{'width': '100%'}"></p-dropdown>影响宽度，但是使用语法<p-dropdown style="width: 100%"></p-dropdown>无效，出现错误：
错误状态：ERROR Error: Cannot find a differ supporting object 'width: 100%'
如果我使用的是button，那么<button style="width: 100%"></button>可以正常工作。任何人都知道这两种语法实际上有何不同之处，为什么一个能为p-dropdown工作，而另一个却不能呢？
答案 0 :(得分：1)
以下是一些有用的信息：
您可以阅读here，以获得更多解释-它称为模板语法。
这里的问题是，您需要知道角度类（逻辑）如何与模板（视图）通信-以及在为特定元素呈现实际的html模板时如何处理自定义元素的属性。
它是这样工作的： 考虑以下两种情况：
<p-dropdown [style]="{'width': '100%'}"></p-dropdown> <p-dropdown style="width: 100%"></p-dropdown> 现在让我们看看它们是如何解释的：
情况1：
这告诉angular寻找一个名为style的属性并为其分配一个值。现在，要理解我的意思-考虑这一点，Lefthand="Righthand"-在您创建的所有自定义角度元素中，右侧站点是在应用程序中某个位置定义的已知对象/函数。通常在您的class.ts中。因此，要提供一个值而不是对某些对象/函数的引用，您必须进一步用单引号-righthand覆盖"'righthand'"。 Angular将其作为值而不是引用来读取。这就是为什么该选项起作用的原因。
情况2：
案例2看起来在程序上是有效的，但从角度上看不是有效的，除非如案例1的解释所述，righthand上提供的内容是对象/函数。请记住，在所有自定义元素中，angular会在渲染该元素的模板时检查所有必须操作并应用的引用变量，对象或函数。因此，当它尝试处理您提供的元素时，会给它提供一个对象width: 100%，该对象无法在应用程序中的任何位置定位。因此它引发了错误。
关于这一点-Angular不需要做任何工作，因为这是一个有效的html元素，并且适用常规的html语法。 Angular不必为
<button>呈现任何内容，因为它是html元素，而不是定义了选择器的Angular元素/组件。
希望您觉得这有用。
我喜欢Angular-因为它是最好的，所以让我们使用它。
答案 1 :(得分：1)
我不了解Angular，但是
<p-dropdown [style]="{'width': '100%'}"></p-dropdown>
看起来像是Angular的特定语法。因此，遵循语法的语法结构很重要。在这种情况下，有必要将样式嵌套在方括号中，并将宽度嵌套在方括号中，例如json对象。
<button style="width: 100%"></button>
是本机HTML语法，因此此内联样式语法可以正常工作。如果这样做，将无法正常工作
<button [style]="{'width: 100%'}"></button>
因为如前所述，这种语法仅适用于Angular。