css - 如何从同一模式内的选择下拉列表中选择选项时设置模式的边距

Question

当在模态中选择选项时，如何将边距顶部调整为模态内容，当人选择模态的边距顶部应为 260px，如果公司选择其应为 300px

指南.html

<div bsModal #addGuide="bs-modal" class="modal fade guide" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-md">
    <div class="modal-content">
        <div class="modal-header">
          <h4 class="modal-title">Header</h4>
        </div>
        <div class="modal-body">
          <div class="form-group">
            <label>Guide Type</label>
            <ng-select [options]="guide" [(ngModel)]="addGuide.value" name="Guide" class='filterDropDown' placeholder="Guide Type" notFoundMsg="No Category Found">
            </ng-select>
          </div> 
          <div class="form-group" *ngIf="addGuide.value == 'person'">
            <md-input-container>
              <input type="text" mdInput name="Name" placeholder="Person Name" [(ngModel)]="addName">
            </md-input-container>
            <md-input-container>
              <input type="text" mdInput name="DOB" placeholder="Person DOB" [(ngModel)]="addDob">
            </md-input-container>
          </div> 
          <div class="form-group" *ngIf="addGuide.value == 'company'">
            <md-input-container>
              <input type="text" mdInput name="AddCompName" placeholder="Company Name" [(ngModel)]="addCompName">
            </md-input-container>
            <md-input-container>
              <input type="text" mdInput name="Add Company Description" placeholder="Company Description" [(ngModel)]="addCompDescription">
            </md-input-container>
          </div>           
        </div>
        <div class="modal-footer">
          Footer
        </div>
      </form>
    </div>
  </div>
</div>

guide.component.ts

import { Component } from '@angular/core';
import { ModalDirective } from 'ng2-bootstrap';

@Component({
  templateUrl: './guide.html'
})
export class GuideComponent{
	constructor() {}
	guide:any = [{ label: 'person', value:'person'}, {label: 'company', value:'company'}];
}

样式.css

.pin .modal-content {
  margin-top: 260px;
}

Answer 1

您可以使用ngStyle来做到这一点

<div [style.margin-top.px] = "addGuide.value == 'person' ? '260' : '300'"></<div> 

您还可以添加条件类并添加重要的 css

last of your css page

<div class="modal-content" [ngClass]="{'margin260': addGuide.value =='person','margin300': addGuide.value == 'company'}"> 
.pin .modal-content.margin260{
    margin-top: 260px !important;
}
.pin .modal-content.margin300{
    margin-top: 300px !important;
}