Question

所以我在我的模板中动态设置图像源和宽度。我看到的问题是它将宽度设置为0.

模板如下：

<img src="{{item.msg}}" width="{{item.width}}" style="float:right" *ngIf="item.templateType == 'image'" />{{item.width}}

该值从.ts

传递如下

this.items.push(new ImageMessage('http://someimage.png', '100%'));

我看到它不显示图像，但正确打印item.width的值。查看检查器，它显示宽度设置为0，这解释了为什么图像没有出现。

但是，我无法理解为什么在img标签中将宽度设置为0。

请帮忙。

感谢。

Answer 1

您可以使用单向绑定语法[style.width.%]将宽度设置为百分比，定位示例中style之类的元素的<img /> attribute binding。 HTML5确实要求width属性以像素为单位，因此使用[style.width.%]属性绑定可以将宽度设置为百分比。

您的ImageMssage对象需要从width对象的ImageMessage值中删除百分比'％'才能使其正常工作。使用此语法，可以灵活地使用字符串或数字。 '100'或100都可以使用。

import {Component, NgModule} from '@angular/core'
import {BrowserModule} from '@angular/platform-browser'
import {CommonModule} from '@angular/common';

@Component({
  selector: 'my-app',
  template: `
    <div>
      <h2>Hello {{name}}</h2>

      <div *ngFor="let item of items">
        <img [src]="item.msg" [style.width.%]="item.width" style="float:right;" />
      </div>
    </div>
  `,
})
export class App {
  name:string;
  items: any[];

  constructor() {
    this.items = [
      { msg: 'http://placehold.it/800', width: '100' },
      { msg: 'http://placehold.it/800', width: '75' },
      { msg: 'http://placehold.it/800', width: 50 },
      { msg: 'http://placehold.it/800', width: '25' }
    ];
  }
}

@NgModule({
  imports: [ BrowserModule, CommonModule ],
  declarations: [ App ],
  bootstrap: [ App ]
})
export class AppModule {}

如果要设置像素，可以使用以下内容：

<img [src]="item.msg" [style.width.px]="item.width" ... />{{item.width}}px

这是展示功能的plunker。

希望这有帮助！

Answer 2

我认为它可能会将宽度设置为0，因为单引号中有100％。与在{ width: '100%' }中一样，尝试删除引号以生成{ width: 100% }。这也可以解释为什么它打印item.width的值。

角度2 img宽度设置为0

2 个答案: