javascript - 在同一个组件内多次集成 Ng-Survey

问题描述

我在我的 Angular 应用程序https://ng-surveys.firebaseapp.com/中使用 ng-surveys 模板，我将模板选择器“”放在 *ngFor 中，以便在同一页面中进行多项调查。它可以工作，但浏览器将所有调查视为同一个调查：当我在一项调查中更改某些内容时，它会在其他调查中更改。

我尝试使用 Angular ComponentResolver 动态集成模板，但我遇到了很多错误，我不确定这种方式能否解决我的问题。

创建-assignment.component.html：

<div class="row">
                        <div class="col-md-12">
                        <div class="card">
                            <div class="card-header">
                                <i class="fa fa-file-text-o fa-lg"></i> Questionnaires
                            </div>
                            <div class="card-body">
                      <tabset>
                          <tab *ngFor="let survey of surveys; let i = index">
                            <ng-template tabHeading><img [src]="survey.category_icon"/> {{survey.category_name}}</ng-template>
                            <!-- <app-create-survey></app-create-survey> -->
                            <!-- <ng-template #dynamic></ng-template> -->
                              <ngs-builder-viewer [options]="options"></ngs-builder-viewer>
                          </tab>
                        </tabset>
                      </div>
                      </div>
                      </div>
                    </div>

创建-assignment.component.ts：

import { Component, OnInit, ViewChild, ViewContainerRef, Inject, AfterViewInit, AfterViewChecked } from '@angular/core';
import { LocalStoreService } from '../../../shared/services/local-store.service';
import { ApplicationService } from '../../../shared/services/application.service';
import { NgbDateParserFormatterService } from '../../../shared/services/ngb-date-parser-formatter.service';
import { Router } from '@angular/router';
import { ToastrService } from 'ngx-toastr';
import { IBuilderOptions, NgSurveyState, IElementAndOptionAnswers } from '../../../shared/ng-surveys/models';
import { Observable } from 'rxjs';
import { Survey } from '../../../shared/models/survey';
import { LoaderService } from '../../../shared/services/loader.service';

@Component({
  selector: 'app-create-assignment',
  templateUrl: './create-assignment.component.html',
  styleUrls: ['./create-assignment.component.scss']
})
export class CreateAssignmentComponent implements OnInit, AfterViewChecked {
  options: IBuilderOptions;
  assignment: any = {};
  pending: Boolean = false;
  user: any;
  shops: any = [];
  survey_categories: any = [];
  surveys: any = [];
  errors: any = {};
  service: any
  @ViewChild('dynamic', { 
    read: ViewContainerRef , static: false
  }) viewContainerRef: ViewContainerRef

  constructor(
    @Inject(LoaderService) service,
    private ls: LocalStoreService,
    public router: Router,
    public toastr: ToastrService,
    private dateService: NgbDateParserFormatterService,
    private appServ: ApplicationService
  ) {
    this.service = service
   }

   ngAfterViewChecked() {
    // this.service.setRootViewContainerRef(this.viewContainerRef)
    // this.service.addDynamicComponent()
   }

  ngOnInit() {
    this.options = {
      importSurvey: {
        callback: this.importSurvey.bind(this),
      },
      surveyButtons: [{
        title: 'Sauvegarder questionnaire',
        icon: 'i-Data-Save',
        text: 'Sauvegarder',
        callback: this.saveSurvey.bind(this),
      }],
      importElement: {
        callback: this.importElement.bind(this),
      },
      elementButtons: [{
        title: 'Sauvegarder question',
        icon: 'i-Data-Save',
        text: 'Sauvegarder',
        callback: this.saveElement.bind(this),
      }]
    };
    this.appServ.getSurveyCategories().subscribe((response: any) => {
      this.survey_categories = response.data;
      this.survey_categories.forEach(el => {
        this.surveys.push(new Survey(el.id, el.name, el.icon, this.options));
      });
    });
    this.user = this.ls.getItem('user');
    this.appServ.getBusinessShops(this.user).subscribe((response: any) => {
      this.shops = response.data;
    });
  }

  importSurvey(): Observable<NgSurveyState> {
    // Mocking get request
    return this.getSurvey();
  }

  importElement(): Observable<IElementAndOptionAnswers> {
    // Mocking get request
    return this.getElement();
  }

  getSurvey(): Observable<NgSurveyState> {
    return
  }

  getElement(): Observable<IElementAndOptionAnswers> {
    return 
  }

  saveSurvey(ngSurveyState: NgSurveyState): void {
    console.log(ngSurveyState);
  }

  saveElement(element: IElementAndOptionAnswers): void {
    // Add post request to save survey data to the DB
    console.log('element: ', element);
  }

  toObject = (map = new Map) =>
  Array.from
    ( map.entries()
    , ([ k, v ]) =>
        v instanceof Map
          ? { key: k, value: this.toObject (v) }
          : { key: k, value: v }
    )

}

我想让每个调查都与其他调查不同

标签： javascriptangulartypescript

javascript - 在同一个组件内多次集成 Ng-Survey

问题描述

解决方案

推荐阅读