Функция forEach для добавления ребенка в угловых?

Question

Я уже сделал проект с использованием простого сценария Java.Теперь его реконструируют как SPA с использованием Angular.Теперь я застрял, чтобы сделать то же самое с помощью Angular.

Функциональность:Нажмите кнопку, чтобы отключить и добавить, в частности, div, и если кнопка щелкает внутри добавленного div, то ранее отключенная кнопка должна быть включена.

Вот и все.

Я сделал, кроме как отключить отключенныйкнопка: Проблема в pBtn недоступна в ElementRef

Ниже приведен мой код и ссылка на стек :

Надеюсь, что кто-то может помочь в этом.

import { Component, OnInit, DoCheck, AfterViewInit, ViewChild, ElementRef,Renderer2 } from '@angular/core';
import { Interviewcreate } from '../../shared/interview-create';
import { Interview } from '../../shared/interview';
import { DataService } from '../../data-service';
import { Router } from '@angular/router';
import { HttpClient, HttpHeaders } from '@angular/common/http';

@Component({
  selector: 'dashboard-component',
  templateUrl: './dashboard-component.html',
  styleUrls: [ './dashboard-component.css' ]
})
export class DashboardComponent implements OnInit, DoCheck, AfterViewInit, OnChanges {
  users: Interviewcreate;
  @ViewChild('answerbox') div:ElementRef;
  @ViewChild('htmlToAdd') htmlToAdd:ElementRef;
  @ViewChild('questionbox') questionbox:ElementRef;

  question1 = ['<p>', '</p>', 'Polar bears live in the north pole']
  constructor(private service: DataService,
              private router: Router,
              private http:HttpClient,
              private renderer: Renderer2,
              private el:ElementRef
            ){

  }
  ngOnInit(){

  }
  ngDoCheck(){
    if(this.htmlToAdd.nativeElement.children.length>0){
      Array.prototype.forEach.call(this.htmlToAdd.nativeElement.children, (element) => {
        //console.log(element)
        element.addEventListener('click', (e)=>{
          this.resultview()
          console.log(e)
          e.target.remove()
        })
      });
    }
  }
  ngAfterViewInit() {
    let sss = this.el.nativeElement.querySelector('.dotted-box > button')
                                  //.addEventListener('click', this.onClick.bind(this));
  }
  onClick(event) {
    console.log(event);
  }
  getvalue(e){
    const li = this.renderer.createElement('button');
    const text = this.renderer.createText(e.target.textContent);
    this.renderer.appendChild(li, text);
    this.renderer.appendChild(this.htmlToAdd.nativeElement, li);
    setTimeout(
      ()=>{
        this.resultview()
      }
      ,100)
    e.target.disabled = true;
    Array.prototype.forEach.call(this.htmlToAdd.nativeElement.children, (element) => {
      this.renderer.addClass(element, 'btn');
      this.renderer.addClass(element, 'btn-outline-primary');
    });
  }
  resultview() {
    this.div.nativeElement.innerHTML = this.htmlToAdd.nativeElement.textContent.trim();
  }

}

Answer 1

Попробуйте, вы написали какую-то сложную логику.Нажмите добавление значения решит вашу проблему.

export class DashboardComponent {
  @ViewChild('answerbox') div:ElementRef;
  @ViewChild('htmlToAdd') htmlToAdd:ElementRef;
  @ViewChild('questionbox') questionbox:ElementRef;

  question1 = ['<p>', '</p>', 'Polar bears live in the north pole' ]
  questionboxvalue = [];
  @Output() someEvent = new EventEmitter<string>();

  constructor(private service: DataService,
    private router: Router,
    private http:HttpClient,
    private renderer: Renderer2,
    private el:ElementRef
  ){
    }

  onClick(event) {
    console.log(event);
  }
  getvalue(e){
    this.questionboxvalue.push({index: e.target.dataset.index, value: e.target.textContent.trim()})
    e.target.disabled = true;
    this.resultview();
  }
  getbvalue(event) {
    this.someEvent.next(event);
    Array.prototype.forEach.call(this.el.nativeElement.querySelectorAll('.shadowbutton'), (element, i)=>{
      if(element.dataset.index === event.target.dataset.index) {
          element.disabled = false;
          this.questionboxvalue = this.questionboxvalue.filter((val)=>{
            return val.index !== event.target.dataset.index;
          })
          this.resultview()
        }
    })

  }
  resultview() {
    setTimeout(()=>{
      this.div.nativeElement.innerHTML = this.htmlToAdd.nativeElement.textContent.trim();
    }, 100)

  }

}