将 *ngFor 对象传递给子组件 angular 6

Question

这是我的父组件.ts

import { Component, OnInit } from '@angular/core';
import {QuestionService} from '../services/question.service'
import { IQuestion } from '../interfaces/iQuestion';
import {ToastrService} from '../services/toastr.service';

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

  Questions : IQuestion[];
  Question : IQuestion ={};
  constructor(private _question : QuestionService, private _toastr :ToastrService ) { }

  ngOnInit() {
    this._question.getQuestions("1").subscribe((data) => {this.Questions = data;}, (err) => {
      this._toastr.error("there is some problem at the server")
    });
  }
}

在我的父组件下面html

<content *ngFor="let question of Questions; let i = index">
  <div class="col-lg-10">
   <b> Question {{i + 1}} : </b> {{question.question}}
  </div>
  <div class="col-md-10">
   <b> Answer :</b> {{question.answer}}
  </div>
  <div class="col-md-10">
    <b> Option A :</b> {{question.optionA}}
  </div>
  <div class="col-md-10">
    <b>Option B :</b> {{question.optionB}}
  </div>
  <div class="col-md-10">
    <b>Option C :</b> {{question.optionC}}
  </div>
  <div class="col-md-10">
    <b> Option D :</b> {{question.optionD}}
  </div>
  <div class="col-md-10">
    <b>Selected Option :</b> {{question.key}}
  </div>
  <div class="col-md-10">
    <b>  Subject :</b> {{question.subject}}
    </div>
    <div class="col-sm-5">
      <button type="button" class="btn btn-info" data-toggle="modal" data-target="#myModal">Open Modal</button>
      </div>


</content>
<div class="col-sm-5">
  <edit-question [Question]="question"></edit-question>
  </div>

下面是我的子组件html，它基本上是一个弹出模型

<div>
  <!-- Modal -->
  <div class="modal fade" id="myModal" role="dialog">
    <div class="modal-dialog">

      <!-- Modal content-->
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal">&times;</button>
          <h4 class="modal-title">Edit Question</h4>
        </div>
        <div class="modal-body">
          <p>this = {{Question.Question}}</p>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        </div>
      </div>

    </div>
  </div>

</div>

下面是我的子组件.ts

import { Component, OnInit, Input } from '@angular/core';
import { IQuestion } from '../interfaces/iQuestion';

@Component({
  selector: 'edit-question',
  templateUrl: './edit-question.component.html',
  styleUrls: ['./edit-question.component.css']
})
export class EditQuestionComponent implements OnInit {
  @Input()
  Question : IQuestion ={};

  constructor() { }

  ngOnInit() {

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

}

现在，当单击 mymodel 时，我想将该特定对象传递给子组件以进行编辑。但我无法获得该对象。任何形式的帮助都将真正得到应用。

Answer 1

<edit-question [Question]="question"></edit-question> 不在 *ngFor 上下文中。

里面应该是-

<content *ngFor="let question of Questions; let i = index">
  <div class="col-lg-10">
   <b> Question {{i + 1}} : </b> {{question.question}}
  </div>
  <div class="col-md-10">
   <b> Answer :</b> {{question.answer}}
  </div>
  <div class="col-md-10">
    <b> Option A :</b> {{question.optionA}}
  </div>
  <div class="col-md-10">
    <b>Option B :</b> {{question.optionB}}
  </div>
  <div class="col-md-10">
    <b>Option C :</b> {{question.optionC}}
  </div>
  <div class="col-md-10">
    <b> Option D :</b> {{question.optionD}}
  </div>
  <div class="col-md-10">
    <b>Selected Option :</b> {{question.key}}
  </div>
  <div class="col-md-10">
    <b>  Subject :</b> {{question.subject}}
    </div>
    <div class="col-sm-5">
      <button type="button" class="btn btn-info" data-toggle="modal" data-target="#myModal">Open Modal</button>
      </div>

   <div class="col-sm-5">
       <edit-question [Question]="question"></edit-question> <!-- inside ngFor context -->

  </div>

</content>

编辑

访问里面的问题变量ngAfterViewInit

ngAfterViewInit() {
   console.log(this.Question.Question);
  }

将 *ngFor 对象传递给子组件 angular 6

Passing *ngFor Object to child component angular 6

angular

angular6

angular7

编辑