角度 2 IMG 宽度设置为 0

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 />。HTML5 确实要求 width 属性以像素为单位，因此使用 [style.width.%] 属性绑定将允许您将宽度设置为百分比。

您的 ImageMssage 对象需要从ImageMessage对象的width值中删除百分比"%"字符才能完成此操作。使用此语法，可以灵活地处理字符串或数字。要么'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 的值。