Angular6: использование компонента «Звездный рейтинг» в нескольких местах на одной странице

Question

Я использую компонент рейтинга в моем приложении AngularJS.Проблема, с которой я сталкиваюсь, очень проста.Моя форма динамическая и основана на типе ввода, который я генерирую.Я использовал рейтинг компонента от здесь .Это работает нормально.Проблема в примере, вопрос генерируется за один раз.Это генерируется с использованием массива элементов.Моя проблема в том, что я не хочу показывать все вопросы, основанные на оценке сразу.Например, вопрос 1 может иметь тип ответа «текст», вопрос 2 может быть оценкой, вопрос 3 может быть переключателем, и снова вопрос 4 может быть оценкой.Код, который я использую для создания моей формы:

<div *ngFor="let question of questions">
    <!-- Questions having no parent questions: -->
    <div class="form-group" *ngIf="question.inputtype === 'textBox'">
      <label class="control-label col-sm-4  black" for={{question.id}}>{{question.question}}</label>
      <input type="text" class="form-control" data-toggle="tooltip" placeholder={{question.placeholder}} [(ngModel)]="model[question.id]"
        name={{question.id}}>
    </div>

    <div class="form-group" *ngIf="question.inputtype === 'checkbox'">
      <label class="control-label col-sm-4  black">{{question.question}}</label>
      <div *ngFor="let option of question.options">
        <label class="control-label black" for={{option}}>{{option}}</label>
        <input type="checkbox" class="" data-toggle="tooltip" name={{option}} [(ngModel)]="model[question.id][option]">
      </div>
    </div>
    <div class="form-group" *ngIf="question.inputtype === 'starRating'">
      <label class="control-label col-sm-4  black">{{question.question}}</label>
      <div>
        <app-rating [rating]='item.rating' [itemId]='item.id' (ratingClick)='ratingComponentClick($event)'></app-rating>
     
      </div>
    </div>
</div>

Answer 1

Насколько я понимаю, вы хотите использовать фрагмент, который вы указали выше несколько раз в одной и той же форме, для рендеринга серии объектов "вопрос".Однако, поскольку фрагмент содержит *ngFor, он выполняет итерации по всем вопросам одновременно.Чтобы исправить это, я бы ввел <app-question/> компонент для визуализации отдельного вопроса

@Component({
  selector: 'app-question',
  templateUrl: './question.component.html',
  styleUrls: [ './question.component.css' ]
})
export class QuestionComponent  {
  @Input()
  model: any//the model to bind to
  @Input()
  question: any// the question object to read

  ratingComponentClick($event){
    this.model[this.question.id] = $event.rating;//somehow map the value to the model
  }

}

question.component.html:

<!-- Questions having no parent questions: -->
<div class="form-group" *ngIf="question.inputtype === 'textBox'">
  <label class="control-label col-sm-4  black" for={{question.id}}>{{question.question}}</label>
  <input type="text" class="form-control" data-toggle="tooltip" placeholder={{question.placeholder}} [(ngModel)]="model[question.id]"
    name={{question.id}}>
</div>

<div class="form-group" *ngIf="question.inputtype === 'checkbox'">
  <label class="control-label col-sm-4  black">{{question.question}}</label>
  <div *ngFor="let option of question.options">
    <label class="control-label black" for={{option}}>{{option}}</label>
    <input type="checkbox" class="" data-toggle="tooltip" name={{option}} [(ngModel)]="model[question.id][option]">
  </div>
</div>
<div class="form-group" *ngIf="question.inputtype === 'starRating'">
  <label class="control-label col-sm-4  black">{{question.question}}</label>
  <div>
    <app-rating [rating]='question.rating' [itemId]='question.id' (ratingClick)='ratingComponentClick($event)'></app-rating>
  </div>
</div>

Затем вы можете использовать этот новый компонент столько, сколькосколько угодно раз и где угодно:

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  name = 'Angular';
  myModel = {}
  questions = [
    { id: 'question1', rating: 3, question: 'Rate Angular', inputtype: 'starRating' },
    { id: 'question2', question: 'Does this answer your question?', inputtype: 'textBox' },
    { id: 'question3', rating: 1, question: 'Rate my answer', inputtype: 'starRating' }
  ];
}

app.component.html:

Reusable Question Component
 


Here's another input



 


 
Edit form to change model:

  {{myModel | json}}

Вот рабочая версия кода .Основным выводом здесь является разделение обязанностей: один компонент содержит вопросы, а другой - один вопрос. Однако это не оптимальное решение , поскольку оно не дает адекватного контроля над проверкой формы.Лучшим решением было бы использовать Reactive Forms , потому что они предназначены именно для этого варианта использования.В официальной документации Angular есть учебник, который стоит прочесть , охватывающий тот же сценарий использования .К сожалению, я чувствую, что освещение этих тем выходит за рамки этого вопроса, поэтому, если у вас есть какие-либо дополнительные вопросы о формах реакции, воспользуйтесь поиском или задайте другой вопрос.Я надеюсь, что это поможет!

PS Я изменил rating.component.css для обработки очистки поплавков:

:host::after{
  content: "";
  clear: both;
  display: table;
}