如何使用 Angular 中对象的字段设置 HTML 宽度属性？

Question

我正在开发 Angular 应用程序，但遇到以下问题。

我有这个 HTML 代码：

<div class="text-center p-title">
    Partners
</div>
<div class="row d-flex align-items-center justify-content-center">
    <div [class.darker-bg]="partner.name === '4ChangeMakers'" 
    (click)="openDialog(partner)"
    *ngFor="let partner of partners" class="col-xs-12 rounded py-4 partner col-md-3">
        <img style="max-height: 400px" width="100%" [src]="partner.img" alt="">
    </div>
</div>

它迭代 partners 数组并使用当前的 partner.img 属性显示这些日志迭代对象：

它工作正常。

正如您在之前的 HTML 代码中看到的，这些图像的宽度是固定的，并且对于所有这些图像都是相同的 width="100%"

我想做的是也将宽度属性的值外部化，以便为不同的徽标图像允许不同的宽度值。

所以我将这个新字段添加到 partners 数组中定义的所有对象中，这样：

export const partners = [
    {
    img: '/assets/partners/slowfashion.png',
    width: "100%",
    name: 'Slow Fashion World',
    url: 'https://slowfashionworld.com/',
    bio: 'SFW is a global community committed to slowing down the fashion world, one story at a time . As a  marketing and communications agency, SFW supports businesses to lead with transparency and communicate their positive actions to transform the fashion industry.\nSFW is known to join communities around social entrepreneurship and fashion, encouraging experiences that involve  diverse voices creating action around  sustainable and slow fashion. SFW has a vision to create one world where co-creation, collaboration and taking action as a community becomes the norm.'
    },
    {
    img: '/assets/partners/4CM.png',
    width: "100%",
    name: '4ChangeMakers',
    url: 'https://www.4changemakers.com/',
    bio: '4ChangeMakers is a community for the new generation of high-impact entrepreneurs that wishes to grow a profitable business while simultaneously doing something good for the world. The founders,  Sina & Fernando are two rebels who dropped out of the traditional business world to believe in the extraordinary power of business as a force for good. Their combined corporate experience has equipped them with the strategies, tools and tactics used by top performing companies. Now, they dedicate their lives to empowering a new generation of entrepreneurs to start and grow sustainable businesses.'
    },
    {
    img: '/assets/partners/5bits.png',
    width: "60%",
    name: 'Fivebits',
    url: 'https://5bits.it/#home-section',
    bio: 'FIVEBITS is a multidisciplinary team made from the synergy of IT professionals counting years of national and international experience. The young and curious spirit, the harmonic evolution, and the adaptive approach are the company\'s main pillars.\r\nTowards objectives, Fivebits aims to:\r\nEmpower your ideas through technology\r\nConvert your business needs into fully functionally software\n\rProvide expert guidance through the design and production of efficient ICT solutions\n\rBe your focal point for ICT.\n'
    }
]

如您所见，现在所有 partners 数组对象都有自己特定的 width 属性（百分比） .

然后我尝试更改之前的 HTML 代码以使用此属性而不是固定的 100% 值。我这样试过：

<img style="max-height: 400px" width="partner.width" [src]="partner.img" alt="">

基本上我正在尝试为 width 属性使用特定的 partner.width 值。但它不起作用。我没有收到任何错误，但现在结果很难看：

使用 Chrome 正在渲染的控制台：

它正在使用 partner.width 字符串而不是此 partner.width 字段的值。

怎么了？我错过了什么？我该如何解决这个问题？

Answer 1

试试这个：

[style.width.%]="partner.width"

同时从 width: "100%", 中删除 % 成为 width: "100",

如何使用 Angular 中对象的字段设置 HTML 宽度属性？

How can I set the HTML width attribute using a field of an object in Angular?

angular-components

angular