Html 如何在angular中获取动态创建的输入值

我已经根据前一页中给出的问题数量创建了一个角度为'question'对象的空哈希映射。然后，当页面初始化时，我在哈希映射中呈现'question'对象。我想在用户单击调用'test（）的'add paper'按钮时，获取每个问题对象的输入值'函数。最好的方法是什么？我曾考虑使用viewChild获取值，但它返回未定义的值。提前感谢

组件文件

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);
  }

}

<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>

从'@angular/core'导入{Component，OnInit，ViewChild，ElementRef，ViewChildren}；
从“./services/sharedservice.service”导入{sharedservices}；
@组成部分({
选择器：“应用程序管理文件”，
templateUrl:“./admin paper.component.html”，
样式URL:['./admin paper.component.css']
})
导出类AdminPaperComponent实现OnInit{
公共paperID：任何；
公众提问：编号；
公共信息：任何；
公共i：数字；
公共问题集={}；
公共问题0：任何；
@ViewChildren（'testchild'）testchild:ElementRef；
构造函数（私有共享：SharedserviceService）{}
恩戈尼尼特（）{
this.shared.currentMessage.subscribe（（消息）=>{
this.message=消息；
});
this.paperID=this.message.paperID；
this.noOfQuestions=this.message.noOfQuestions；
for（this.i=0；this.i

HTML文件

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);
  }

}

<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>

问题{Question.value.questionID+1}
答复1
答复2
答复3
答复4
正确答案
添加问题



添加纸张

*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);
    });
  }

ngOnInit（）{
this.shared.currentMessage.subscribe（（消息）=>{
this.message=消息；
this.paperID=this.message.paperID；
this.noOfQuestions=this.message.noOfQuestions；
for（设i=0；i

questionSet没有问题，因为我想在开始时显示空的输入字段。我想做的是单击“添加纸张”时，获取输入字段中的所有值，准备问题对象并将其添加到哈希映射中。现在从测试函数中创建了一个question对象，但是它的值是`{paperID:11，questionID:0，question:'question0'.val（））；”，answers:Array（4），correctAnswer:“vghvhg”}，而我希望输入字段中为question及其答案提供值