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

问题描述

我正在开发一个 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>

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

它工作正常。

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

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

所以我将这个新字段添加到定义到合作伙伴数组中的所有对象中，以这种方式：

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'
    }
]

如您所见，现在所有合作伙伴数组对象都有自己特定的宽度属性（百分比）。

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

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

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

使用 Chrome 控制台呈现：

它采用的是partner.width字符串，而不是这个 partner.width 字段的值。

怎么了？我错过了什么？我该如何解决这种行为？

标签： angularangular-components

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

问题描述

解决方案

推荐阅读