0

我得到了一个存储名称和其他一些字符串属性的数组。

我也有“ImagePath”。我找到的解决方案是在图像源中，我们在源周围使用方括号 []。

我确实知道这意味着属性绑定，但是为什么我们要在 src 周围使用它。除了这个用例之外，了解财产的最佳方式是什么。

Export class RecipeListComponent implements OnInit {
  recipes: Recipe[] = [
    new Recipe('A Test Recipe', 'This is simply a test', 'https://upload.wikimedia.org/wikipedia/commons/1/15/Recipe_logo.jpeg'),
    new Recipe('A Test Recipe', 'This is simply a test', 'https://upload.wikimedia.org/wikipedia/commons/1/15/Recipe_logo.jpeg')
  ];

 <span class="float-right">
   <img [src] ="recipe.imagePath" 
     alt="{{ recipe.name }}" 
     class="img-fluid" style="max-height: 50px;">
 </span>
4

1 回答 1

0

首先，对于 [src] 案例- 由于您的图像路径不是静态的，因此您通过 [src] 将动态图像路径绑定到 html。HTMLElement img 的 src 属性绑定到recipe.imagePath，如果您更改 ts 中的路径，它将在 html 中相应更改。方括号用于将数据绑定到元素的属性。

另一个需要考虑的重要用例是@Input 绑定。将价值从一个组件传递到另一个组件。您可以像这样将一些值从父组件传递给子组件-

  <app-child
    [simpleText]="someText"
    [magicText]="'Testing magic text'"
    [pubProp]="pubPropText">
  </app-child>

请参阅此示例：https ://stackblitz.com/edit/angular-input-example并且也可以查看此博客文章 - https://blog.bitsrc.io/one-way-property-binding-mechanism-in-angular -f1b25cf00de7

于 2019-05-16T09:59:20.527 回答