Angular 9: печать значений флажка при проверке в последовательности, в которой они отображаются в html - PullRequest
0 голосов
/ 05 апреля 2020

Я хочу напечатать значения элементов html в элементе div при возникновении события входного элемента. Но значения должны быть напечатаны в том порядке, в котором они отображаются ...

Checkboxes in Html

Приведенное выше изображение в ссылке показывает 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>

Заранее спасибо!

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...