Question

我有2个字段，一个是图片上传和视频上传。我希望css的部分只反映在视频部分。任何人都可以帮我解决这个问题。

HTML：

<div class="row">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12" *ngFor="let media of medias; let i = index">
  <div class = "type-img" [hidden]= "selectedImage !='img'">
    <img class="cat-img" src="{{media.image_path}}" style="width: 100px;margin: 10px 0px;" type='img' *ngIf="selectedImage=='img'" />
  </div>
  <div class = "type-video" [hidden]= "selectedImage !='video'" >
  <video width="320" height="240" controls> <source src="{{media.image_path}}" type="video/mp4" *ngIf="selectedImage=='video'" ></video>
  </div>
  <p class="inputimg video">
    <input type="file" name="{{media._id}}[i]" id="{{media._id}}[i]" class="inputfile" (change)="editPinImage($event,media)" style='display: none;' />
    <label *ngIf="media._id" for="{{media._id}}[i]" class="img_change">Change</label>
    <label *ngIf="!media._id" for="{{media._id}}[i]" class="img_change">Add</label>
  </p>
  <div class = "type-video"  [hidden]= "selectedImage !='video'" >
  <span style="margin-left: 12%;">or </span>
  <input type="text" class="form-control form-textbox input-text" (change)="editPinImage($event,media)" style="width: 28%;margin-right: 24%;">
  </div>
</div>

在这里，<p class="inputimg video">，我需要这部分css仅适用于视频

.video {
  float: right;
  margin-right: 56%;
  margin-top: -2%;
}

Answer 1

使用NgClass。希望您在选择的图像为“视频”时需要视频课程

<p class="inputimg" [ngClass]="{'video': selectedImage =='video'}">

如何在angular2中基于ngIf条件反映CSS

1 个答案: