Я пытаюсь динамически проверить поле ввода, но элемент ввода возвращается как неопределенный, потому что, когда я пытаюсь получить элемент по его идентификатору и установить флажок, он еще не был добавлен в 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>