Блог

Я пытаюсь обработать данные между span и ngModel , в моем файле component.ts у меня есть данные матрицы , и я отображаю ту же матрицу, что и на стороне пользовательского интерфейса, но из пользовательского интерфейса, когда когда-либо редактирую матрицу, она должна отражаться в моем компоненте.ts и наоборот, и когда я отправляю данные на серверную часть, она должна идти, даже я меняю матрицу со стороны пользовательского интерфейса или со стороны компонента.ts, мои данные должны передаваться, поэтому, пожалуйста, помогите мне с возможным решением.

Возникла проблема с двусторонней привязкой дневных данных при попытке получить данные из элемента span с помощью ngModel

component.html

     <form>
        <div>  
            <div *ngFor="let arrayList of data let index = i" style="text-align: center;">
                <span style="font-size: 30px;">[</span><span *ngFor="let arrayList2 of arrayList">
       ``             <span style="font-size:30px !important; color: red; margin: 10px;"
                    contenteditable="true" [ngModelOptions]="{standalone: true}"   [(ngModel)] = "data[i]" ngDefaultControl >{{arrayList2}}</span>
                </span><span style="font-size: 30px;">]</span>
            </div>
    
            <div style="text-align: center;">
                <button class="group-btn"
                    style="padding: 22px;color: white; font-size : 20px;background-color: blue;border-radius: 50%; margin: 20px 0px;"
                    (click)="getPatientGroups()">Click for Patient groups</button>
            </div>
    
            <h1 class="group-data" *ngIf="patientData" style="color: green; text-align: center;"> The Patient Group <span
                    *ngIf="patientData > 1">'s</span> are : <span style="color: black;">{{patientData}}</span></h1>
        </div>
    </form>
 

компонент.ts

     import { Component, OnInit } from '@angular/core';
    import { Data } from '@angular/router';
    import { chatSupportService } from '../services/chat-support.service';
    import { FormsModule } from '@angular/forms';
    
    
    @Component({
        selector: 'app-patient-group',
        templateUrl: './patient-group.component.html',
        styleUrls: ['./patient-group.component.css']
    })
    export class PatientGroupComponent implements OnInit {
        public data = [
            [1, 1, 0, 0, 0, 0],
            [0, 0, 0, 0, 0, 0],
            [1, 0, 1, 0, 0, 0],
            [0, 0, 0, 0, 1, 0],
            [0, 0, 0, 0, 0, 1],
            [1, 1, 0, 1, 0, 0]
        ];
        public patientData;
        constructor(
            private chatService: chatSupportService
        ) { }
    
        ngOnInit() { }
    
    
        getPatientGroups() {
            this.chatService.getPatientsGroup(this.data).subscribe((res: any) => {
                console.log(JSON.stringify(res)   "response");
                this.patientData = res.data;
    
            }
            )
    
    
        }
    }