Наличие программы начальной загрузки генератора угловых динамических CSS - PullRequest
Новая
       48

Наличие программы начальной загрузки генератора угловых динамических CSS

0 голосов
/ 28 февраля 2019

Я пытаюсь создать динамический генератор форм на основе шаблона Angular's Dynamic Forms с использованием Angular 7, и я сталкиваюсь с проблемой 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>

Когда это отображается на экране, раскрывающиеся списки выровнены правильно, с правильной шириной, как вы можете видеть:

enter image description here

Теперь, если я буду следовать методу 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>

Когда форма отображается на экране, она выглядит следующим образом:

enter image description here

Как видите, ширина столбцапропали.Я уверен, что это как-то связано с тегом div, содержащим атрибут FormGroup, но это необходимо для компиляции и работы компонента.Я попытался добавить его с помощью тега span, добавить класс col-md-6 в тот же тег, что и FormGroup, но получаю тот же неправильный CSS-рендеринг.

Это еще одна проблема Bootstrap 4, в которой яможет понадобиться перейти к Bootstrap 3, чтобы это работало?Если нет, что происходит и как я могу заставить страницу правильно отображаться, как первое изображение, и в то же время иметь возможность использовать компонент app-question в моем коде?

1 Ответ

0 голосов
/ 28 февраля 2019

Я считаю, что проблема в том, что Angular отображает app-question компонент в виде тега <app-question></app-question>, а ваши теги div внутри него имеют стили относительно этого тега app-question, но не родительский <div class="row">.Поэтому, если вы добавите класс col-md-6 (например), он будет покрывать 50% тега app-question, но не тег 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>
...