Question

我已经使用简单的java脚本完成了项目。现在它使用Angular进行SPA改造。现在，我仍然坚持使用Angular做同样的事情。

功能：
单击按钮以禁用和追加div，如果按钮在附加的div中单击，则先前禁用的按钮将被启用。

那就是它。

除了启用禁用按钮之外，我做了以下事情：问题 pBtn 在ElementRef

中不可用

以下是我的代码和stackblitz link：

希望有人可以为此提供帮助。

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)

  }

}

forEach函数appendChild是否为angular？

1 个答案: