Я хочу напечатать значения элементов html в элементе div при возникновении события входного элемента. Но значения должны быть напечатаны в том порядке, в котором они отображаются ...
Приведенное выше изображение в ссылке показывает 4 checkboxes
, Checkbox0
, Checkbox1
, Checkbox2
и Checkbox3
.
Они должны быть напечатаны в следующей последовательности: checkbox0//Checkbox1//Checkbox2//Checkbox3//
Я использую субъект в качестве наблюдаемого в службе связи компонентов.
Код в Service
здесь находится ниже:
import { Injectable } from '@angular/core';
import { Subject } from 'rxjs';
@Injectable({
providedIn: 'root'
})
export class UpdateNotesService {
private _UpdateNoteSource = new Subject<string>();
public UpdateNotesSource$ = this._UpdateNoteSource.asObservable();
public NotesStr: string = '';
constructor() { }
UpdateNotestest() {
this._UpdateNoteSource.next(this.NotesStr);
}
}
Код в .ts
файле компонента:
UpdateNotes(e) {
//this._UpdateNoteService.NotesStr = '';
if (e.target.id === 'rdoConfirmCustName') {
this.InsertUpdateNoteText(e.target.checked, e.target.value);
}
else if (e.target.id === 'rdoConfirmTP') {
this.InsertUpdateNoteText(e.target.checked, e.target.value);
}
else if (e.target.id === 'rdoConfirmCoBorName') {
this.InsertUpdateNoteText(e.target.checked, e.target.value);
}
else if (e.target.id === 'rdoConfirmWrongNum') {
this.InsertUpdateNoteText(e.target.checked, e.target.value);
}
else if (e.target.id === 'rdoConfirmAuth3rdParty') {
this.InsertUpdateNoteText(e.target.checked, e.target.value);
}
else if (e.target.id === 'rdoMessageLeft') {
this.InsertUpdateNoteText(e.target.checked, e.target.value);
}
else if (e.target.id === 'rdoNoAnswer') {
this.InsertUpdateNoteText(e.target.checked, e.target.value);
}
if (e.target.id === 'ckCallDisconnected') {
this.InsertUpdateNoteText(e.target.checked, e.target.value);
}
if (e.target.id === 'ckConfirmCeaseNum') {
this.InsertUpdateNoteText(e.target.checked, e.target.value);
}
if (e.target.id === 'ckInconvenientTime') {
this.InsertUpdateNoteText(e.target.checked, e.target.value);
}
if (e.target.id === 'ckCCPA') {
this.InsertUpdateNoteText(e.target.checked, e.target.value);
}
if (e.target.id === 'ckRequestedCallback') {
this.InsertUpdateNoteText(e.target.checked, e.target.value);
}
this._UpdateNoteService.UpdateNotestest();
}
InsertUpdateNoteText(isValid: boolean, textValue: string) {
if (isValid) {
this._UpdateNoteService.NotesStr = this._UpdateNoteService.NotesStr + (textValue + '//');
}
else {
this._UpdateNoteService.NotesStr = this._UpdateNoteService.NotesStr.replace((textValue + '//'), '');
}
}
Код в компоненте, в котором должны быть напечатаны значения:
import { Component, OnInit } from '@angular/core';
import { UpdateNotesService } from '../update-notes.service';
@Component({
selector: 'app-qn-notes',
templateUrl: './qn-notes.component.html',
styleUrls: ['./qn-notes.component.css']
})
export class QnNotesComponent implements OnInit {
public QnNotesstr: string = '';
constructor(private _updateNotesService: UpdateNotesService) { }
ngOnInit(): void {
this._updateNotesService.UpdateNotesSource$
.subscribe(notes => {
this.QnNotesstr = notes;
});
}
}
Html код этого компонента
<div class="col-lg-12 row">
<span class="border border-dark qnBox" id="spnQnBox">
{{QnNotesstr}}
</span>
</div>
Заранее спасибо!