javascript - 获取详细信息后动态检查附加到 DOM 的输入框

Question

我正在尝试动态检查输入框，但输入元素返回时未定义，因为当我尝试通过其 ID 获取元素并尝试检查尚未添加到 DOM 的框时。我试图将操作包装在 ngAfterViewInit(){} 函数中，但这并没有达到目的。关于仅在附加所有输入选项后如何调用 markPreviouslyVoted() 函数的任何建议？

<input *ngFor="let choice of inputChoices" class="checkbox" type="checkbox" (click)="vote(choice.id)" id="{{choice.id}}" style="display: block; cursor: pointer;">

有没有我可以在模板上使用的指令？也许像 [ng-init]="markPreviouslyVoted()"这样的东西？

poll.component.ts

import { Component, OnInit } from '@angular/core';
import * as Chart from 'chart.js';
import { Observable } from 'rxjs';
import { FirebaseService } from '../services/firebase.service';
import { first } from 'rxjs/operators';
import { Input, Output, EventEmitter } from '@angular/core';
import { CardModule } from 'primeng/card';

@Component({
  selector: 'app-poll',
  templateUrl: './poll.component.html',
  styleUrls: ['./poll.component.scss']
})
export class PollComponent implements OnInit {
  chart:any;
  poll:any;
  votes:[] = [];
  labels:string[] = [];
  title:string = "";
  isDrawn:boolean = false;
  inputChoices:any = [];
  username:string = "";
  points:number;
  uid:string = "";
  votedChoice:string;

  @Input()
  pollKey: string;

  @Output()
  editEvent = new EventEmitter<string>();

  @Output()
  deleteEvent = new EventEmitter<string>();

  constructor(private firebaseService: FirebaseService) { }

  ngOnInit() {
    this.firebaseService.getPoll(this.pollKey).subscribe(pollDoc => {
      // ToDo: draw poll choices on create without breaking vote listener
      console.log("details?", pollDoc);
      // Return if subscription was triggered due to poll deletion
      if (!pollDoc.payload.exists) {
        return;
      }
      const pollData:any = pollDoc.payload.data();
      this.poll = {
        id: pollDoc.payload.id,
        helperText: pollData.helperText,
        pollType: pollData.pollType,
        scoringType: pollData.scoringType,
        user: pollData.user
      };

      if (this.poll.pollType == 1) {
        this.title = "A";
      }
      if (this.poll.pollType == 2) {
        this.title = "B";
      }
      if (this.poll.pollType == 3) {
        this.title = "C";
      }
      if (this.poll.pollType == 4) {
        this.title = "D";
      }

      // Populate username and user points
      this.firebaseService.getUser(pollData.user).subscribe((user:any) => {
        const userDetails = user.payload._document.proto;
        if (userDetails) {
        this.uid = user.payload.id;
        this.username = userDetails.fields.username.stringValue;
        this.points = userDetails.fields.points.integerValue;
        }
      });

      this.firebaseService.getChoices(this.pollKey).pipe(first()).subscribe(choices => {
        this.poll.choices = [];
        choices.forEach(choice => {
          const choiceData:any = choice.payload.doc.data();
          const choiceKey:any = choice.payload.doc.id;
          this.firebaseService.getVotes(choiceKey).pipe(first()).subscribe((votes: any) => {
            this.poll.choices.push({
              id: choiceKey,
              text: choiceData.text,
              votes: votes.length
            });
            // filter votes that equal userId and choiceId
            // if vote is found, check the box
            let hasVoted = votes.filter((vote) => {
              return (vote.payload.doc._document.proto.fields.choice.stringValue == choiceKey) &&
              (vote.payload.doc._document.proto.fields.user.stringValue == this.uid);
            });
            if (hasVoted.length > 0) {
              this.votedChoice = hasVoted[0].payload.doc._document.proto.fields.choice.stringValue;
            }
          });
          this.firebaseService.getVotes(choiceKey).subscribe((votes: any) => {
            if (this.isDrawn) {
              const selectedChoice = this.poll.choices.find((choice) => {
                return choice.id == choiceKey
              });
              selectedChoice.votes = votes.length;
              this.drawPoll();
            }
          });
        });
        setTimeout(() => {
          this.drawPoll();
        }, 1500)
      });
    });
  }

  drawPoll() {
    if (this.isDrawn) {
      this.chart.data.datasets[0].data = this.poll.choices.map(choice => choice.votes);
      this.chart.data.datasets[0].label = this.poll.choices.map(choice => choice.text);
      this.chart.update()
    }
    if (!this.isDrawn) {
      this.inputChoices = this.poll.choices;
      var canvas =  <HTMLCanvasElement> document.getElementById(this.pollKey);
      var ctx = canvas.getContext("2d");
      this.chart = new Chart(ctx, {
        type: 'horizontalBar',
        data: {
          labels: this.poll.choices.map(choice => choice.text),
          datasets: [{
            label: this.title,
            data: this.poll.choices.map(choice => choice.votes),
            fill: false,
            backgroundColor: [
              "rgba(255, 4, 40, 0.2)",
              "rgba(19, 32, 98, 0.2)",
              "rgba(255, 4, 40, 0.2)",
              "rgba(19, 32, 98, 0.2)",
              "rgba(255, 4, 40, 0.2)",
              "rgba(19, 32, 98, 0.2)"
            ],
            borderColor: [
              "rgb(255, 4, 40)",
              "rgb(19, 32, 98)",
              "rgb(255, 4, 40)",
              "rgb(19, 32, 98)",
              "rgb(255, 4, 40)",
              "rgb(19, 32, 98)",
            ],
            borderWidth: 1
          }]
        },
        options: {
          events: ["touchend", "click", "mouseout"],
          onClick: function(e) {
            console.log("clicked!", e);
          },
          tooltips: {
            enabled: true
          },
          title: {
            display: true,
            text: this.title,
            fontSize: 14,
            fontColor: '#666'
          },
          legend: {
            display: false
          },
          maintainAspectRatio: true,
          responsive: true,
          scales: {
            xAxes: [{
              ticks: {
                beginAtZero: true,
                precision: 0
              }
            }]
          }
        }
      });
      this.isDrawn = true;
    }
  }

  ngAfterViewInit() {
    this.markPreviouslyVoted();
  }

  markPreviouslyVoted() {
    let previouslyVoted:any = document.getElementById(this.votedChoice);
    if (previouslyVoted) {
      previouslyVoted.checked = true;
    }
  }

}

poll.component.html

<p-card>
  <p-header>
    <div style="float: left;">
      <i class="pi pi-pencil" style="font-size: 1.5em" (click)="edit()" style="cursor: pointer; margin-left: 8px;"></i>
      <i class="pi pi-trash" style="font-size: 1.5em" (click)="delete()" style="cursor: pointer; margin-left: 8px;"></i>
    </div>
    <div style="float: right;">
      <p style="margin-right: 8px; font-size: 10px;">Posted by {{username}} <i class="pi pi-star" style="font-size: 1.0em"></i>{{points}} points</p>
    </div>
  </p-header>
  <div class="chart-container" style="position: relative; width: 325px !important;">
    <canvas id="{{pollKey}}"></canvas>
    <div class="checkbox-container" style="position: absolute; top: 32px; left: 300px;">
      <input *ngFor="let choice of inputChoices" class="checkbox" type="checkbox" (click)="vote(choice.id)" id="{{choice.id}}" style="display: block; cursor: pointer;">
    </div>
  </div>
  <p-footer>
    <div style="text-align: left;
    background-color: rgba(19, 32, 98, 0.7);
    width: fit-content;
    padding: 5px;
    color: white;
    border-radius: 20px;
    font-size: 8px;
    font-weight: 600;">
      {{getScoringType()}}
    </div>
  </p-footer>
</p-card>

Answer 1

考虑到您想要实现的只是选中复选框...

您是否尝试过将 [checked]="< something > == this.votedChoice"添加到您的输入中？