Question

我正在尝试使用Angular 7基于Angular's Dynamic Forms模板的动态表单生成器，但遇到了CSS问题。我正在使用Bootstrap 4.0，我希望这不是我需要回到3.0的问题（我以前有一个涉及此的问题，但是正确的重新编码使其可以在4.0中使用）。如果是这样，请告诉我。

现在，这是我的应用为最终产品正确运行的方式。我生成下拉菜单的代码是：

<div class="row">
  <div *ngFor="let question of questions" class="col-md-6 form-group">
    <label for="{{question.key}}">{{question.label}}</label>
    <span [ngSwitch]="question.controlType">
      <select *ngSwitchCase="'dropdown'"
        [id]="question.key"
        [formControlName]="question.key"
        [className]="question.fieldClass">
        <option *ngFor="let opt of question.options" [ngValue]="opt.value">{{opt.name}}</option>
      </select>
    </span>
    <span class="help-block error" *ngIf="isFormTouchedAndInvalid(question.key)">{{question.label}} is invalid</span>
  </div>
</div>

将其呈现到屏幕上时，下拉菜单将按照正确的宽度正确对齐，如您所见：

现在，如果我遵循Angular的方法，我的主代码块现在将变为：

<div class="row">
  <app-question *ngFor="let question of questions" [question]="question" [form]="form"></app-question>
</div>

我的应用程序问题组件具有以下代码：

<div [formGroup]="form">
  <div class="col-{{question.colType}}-{{question.colWidth}} form-group">
    <label for="{{question.key}}">{{question.label}}</label>
    <span [ngSwitch]="question.controlType">
      <select *ngSwitchCase="'dropdown'"
        [id]="question.key"
        [formControlName]="question.key"
        [className]="question.fieldClass"
        >
        <option *ngFor="let opt of question.options" [ngValue]="opt.value">{{opt.name}}</option>
      </select>
    </span>
    <span class="help-block error" *ngIf="isFormTouchedAndInvalid(question.key)">{{question.label}} is invalid</span>
  </div>
</div>

当表单呈现到屏幕上时，它看起来像这样：

如您所见，列宽已消失。我敢肯定，这与持有FormGroup属性的div标签有关，但这是组件进行编译和工作所必需的。我尝试过使用span标签添加它，将col-md-6类添加到与FormGroup相同的标签中，但是我得到了相同的错误CSS渲染。

这是另一个Bootstrap 4问题，我可能需要转到Bootstrap 3才能起作用？如果没有，那是怎么回事，如何使页面像第一个图像一样正确渲染，但仍然能够在我的代码中使用app-question组件？

Answer 1

我认为问题在于Angular将app-question组件渲染为标签<app-question></app-question>，并且其中的div标签具有相对于该app-question标签的样式，但是而不是父<div class="row">。因此，如果您添加一个类col-md-6（例如），它将覆盖app-question标签的50％，但不会覆盖row标签。

因此，如果您希望样式起作用，则应在此处添加类

<div class="row">
  <app-question *ngFor="let question of questions"
         [question]="question"
         [form]="form"
         class="col-md-6"> 
  </app-question>
</div>

作为替代方案，您可以更改app-question组件装饰器以使其成为属性。

@Component({
  selector: '[app-question]'
})

然后将其用于您喜欢的任何标签

<div class="row">
   <div app-question
        *ngFor="let question of questions"
        [question]="question"
        [form]="form"
        class="col-md-6"> 
   </app-question>
</div>

遇到Angular Dynamic Form Generator Bootstrap CSS问题

1 个答案: