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

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

0 голосов
/ 02 декабря 2018

Я создал пустую хеш-карту объекта 'вопрос' в угловом формате согласно номеру.вопросов, заданных на предыдущей странице. Когда я инициализирую страницу, я отрисовываю объекты 'вопрос' в хэш-карте. Я хочу получить значения входных данных для каждого объекта вопроса, когда пользователь нажимает кнопку "Добавить бумагу", котораявызывает функцию 'test ()'. Каков наилучший способ сделать это? Я думал об использовании viewChild для получения значений, но он возвращает undefined. Заранее.

Файл компонента 

import { Component, OnInit, ViewChild,ElementRef, ViewChildren } from '@angular/core';
import { SharedserviceService } from "../services/sharedservice.service";

@Component({
  selector: 'app-admin-paper',
  templateUrl: './admin-paper.component.html',
  styleUrls: ['./admin-paper.component.css']
})
export class AdminPaperComponent implements OnInit {

  public paperID:any;
  public noOfQuestions : number ;
  public message : any;
  public i : number ;
  public questionSet = {};
  public question0 : any;

  @ViewChildren('testchild') testchild :ElementRef;
  constructor(private shared : SharedserviceService) { }

  ngOnInit() {
    this.shared.currentMessage.subscribe((message)=>{
      this.message = message;
    });
    this.paperID = this.message.paperID;
    this.noOfQuestions = this.message.noOfQuestions;

    for (this.i =0;this.i < this.noOfQuestions;this.i++){
      const question = {
        'paperID': this.paperID,
        'questionID': this.i,
        'question': '',
        'answers': [],
        'correctAnswer':''
      };
      this.questionSet[this.i] = question;
    }

    console.log(this.questionSet);
  }

  test(){

    //console.log(this.testchild.nativeElement.value);

    for (this.i =0;this.i < this.noOfQuestions;this.i++){

      const question = {
        'paperID': this.paperID,
        'questionID': this.i,
        'question': `question${this.i}');`,
        'answers': [`question${this.i}answer0`,`question${this.i}answer1`,`question${this.i}answer2`,`question${this.i}answer3`],
        'correctAnswer':'vghvhg'
      };
      console.log(question);
      this.questionSet[this.i] = question;
    }
    console.log("clicked");
    console.log(this.questionSet);
  }

}

HTML-файл 

<ng-container *ngIf="questionSet" >
<div class="panel panel-widget border-right" *ngFor="let question of questionSet | keyvalue; let i= index;" style="text-align: left; background-color: white; padding: 10px; border-radius: 10px;border-style: solid; border-width: 3px; border-color: #1aa3ff;">
  <div class="container">
    <div class="row">
    <div class="form-group col-md-10">
      <label> Question  {{question.value.questionID+1}}</label>
      <input type="text" class="form-control" #question{{i}} aria-describedby="emailHelp" placeholder="Enter question Here">
    </div>
  </div>
    <div class= "row">
    <div class="col-sm-2">
      <div class="form-group">
        <label>Answer 1</label>
        <input type="email" class="form-control" id="question{{i}}answer0" aria-describedby="emailHelp" placeholder="Answer 1">
      </div>
    </div>

    <div class="col-sm-2">
      <div class="form-group">
        <label>Answer 2</label>
        <input type="email" class="form-control" id="question{{i}}answer1" aria-describedby="emailHelp" placeholder="Answer 2">
      </div>
    </div>

    <div class="col-sm-2">
      <div class="form-group">
        <label>Answer 3</label>
        <input type="email" class="form-control"  id="question{{i}}answer2" aria-describedby="emailHelp" placeholder="Answer 3">
      </div>
    </div>

    <div class="col-sm-2">
      <div class="form-group">
        <label>Answer 4</label>
        <input type="email" class="form-control"  id="question{{i}}answer3" aria-describedby="emailHelp" placeholder="Answer 4">
      </div>
    </div>
  </div>

    </div>

    <div class="row">
      <div class="col-sm-6">
          <div class="form-group">
            <label>Correct Answer</label>
            <input type="text" class="form-control"  aria-describedby="emailHelp" placeholder="Correct Answer">
          </div>
        </div>
      <div class="col-sm-6">
          <button type="submit" style="margin-top:6%"  (click)="addQuestion($event,question,'new')" class="btn btn-primary mb-2">Add Question</button>
      </div>
    </div>
    <br><br>


</div>
</ng-container>

<button type="button" class="btn btn-primary btn-lg btn-block" (click)="test()">Add Paper</button>

1 Ответ

0 голосов
/ 02 декабря 2018

*ngIf="questionSet" всегда будет истиной, потому что пустой объект является истинным значением в js.Конвертируйте ваши ngOnInit как это 

  ngOnInit() {
    this.shared.currentMessage.subscribe((message)=>{
        this.message = message;
        this.paperID = this.message.paperID;
        this.noOfQuestions = this.message.noOfQuestions;

        for (let i =0; i < this.noOfQuestions; i++){
          const question = {
            'paperID': this.paperID,
            'questionID': this.i,
            'question': '',
            'answers': [],
            'correctAnswer':''
          };
          this.questionSet[this.i] = question;
        }

        console.log(this.questionSet);
    });
  }
...