Question

我正在制作一个Angular应用程序，该应用程序可以在在线API上查找电影，可以将其添加到自己的数据库中，也可以从数据库中删除它们。有3个组成部分： -电影，具有要在其他2个组件中显示的电影卡模板（由海报+标题组成） -电影：我收藏中添加的所有电影的列表。在这里，您可以单击海报以转到包含电影详细信息的页面，也可以通过单击fab按钮将其从我的数据库中删除。 -电影添加：一种简单的形式，您可以在其中通过在线API中的标题或关键字查找电影。在这里，单击海报也会带您到详细信息页面，但是fab按钮会将其添加到我的数据库中。

这是电影组件的HTML代码：

<div class="card green lighten-5">
  <div class="card-image">
    <a routerLink="/movies/movie/{{movie.id}}">
      <img src={{movie.poster}} alt={{movie.title}}>
    </a>
    <a class="btn-floating halfway-fab waves-effect waves-light red" (click)="onClick(movie)"><i class="material-icons">delete</i></a>
  </div>
  <div class="card-content">
    <p><b>{{movie.title}}</b></p>
  </div>
</div>

这是我的电影：

<h2>Movies</h2>
<div class="row">
  <div class="col s6 m3" *ngFor="let movie of movies">
          <media-movie [movie]='movie' (selected)='deleteMovie(movie)'></media-movie>
  </div>
</div>

movie-add（我省略了表格，因为它与我的问题无关）：

<div class="row">
  <div class="col s6 m3" *ngFor="let movie of movies">
      <media-movie [movie]='movie' (selected)='addMovie(movie)'></media-movie>
  </div>
</div>

现在，它确实可以工作，但是我希望fab按钮在第一种情况下为带有删除图标的红色，在第二种情况下为带有添加图标的绿色。是否可以通过简单的方法将这两个值添加到代码中？

我已经尝试过了，但是没有用：电影：

<a class="btn-floating halfway-fab waves-effect waves-light {{color}}" (click)="onClick(movie)"><i class="material-icons">{{iconAction}}</i></a>

电影添加：

<media-movie [movie]='movie' [color]=green [iconAction]='add' (selected)='addMovie(movie)'></media-movie>

Answer 1

我同意您的问题尚不清楚，但我为您提供了一个答案。您可以通过几种方法进行有条件的角度绑定。如果要有条件地添加类，则可以使用ngClass。如果要有条件地绑定样式，则可以对这种样式[style.font-size.px]="isImportant ? '30' : '16'"使用属性绑定，也可以使用ngStyle。

我已经使用ngStyle构建了一个快速的示例应用程序。它具有一个测试按钮，并且通过单击切换文件来更改背景颜色。让我知道这是否有帮助，或者您是否可以进一步完善答案，我很乐意调整示例。

https://stackblitz.com/edit/angular-312aft

如何在有角项目的html组件之间传递字符串变量作为参数？

1 个答案: