如何动态地将文本框唯一的行？

Question

我创建了一个矩阵，其中包含多个文本框。我希望文本框为列独特地工作。我从API nd获取行和列的数据，然后必须将其添加到表中。

HTML文件

<div class="card" *ngIf="inputQuestionType == 'matrixtextbox'">
    <div class="header custom-justify-content-space-between">
        <h2>{{QuestionDescription}}<span *ngIf="questionSettin[0].value" style="color: red;"> *</span></h2>
        <mat-icon matSuffix title="{{AnswerHint}}" *ngIf="AnswerHint && AnswerHint != ''">help_outline</mat-icon>
    </div>
    <div class="body">
        <div *ngIf="dataValue.length > 0 && displayColumns.length >0">
        <table mat-table [dataSource]="dataValue" style="width: 100%;">
            <ng-container matColumnDef="question">
          <th mat-header-cell *matHeaderCellDef></th>
          <td mat-cell *matCellDef="let row=index">{{dataValue[row]}}</td>
          </ng-container>
          
            <ng-container
              *ngFor="let innerColumn of displayColumns;let i=index"
              [matColumnDef]="innerColumn">
            
              <th mat-header-cell *matHeaderCellDef>{{displayColumns[i]}}</th>
              <td mat-cell *matCellDef="let element;let row=index">
                <mat-form-field class="example-full-width" appearance="outline">
                    <!-- <mat-label>Input</mat-label> -->
                    <input matInput type="text" autocomplete="off" (change)="radiochange($event)" [(ngModel)]="dataSer.previewQAns">
                </mat-form-field>
              </td>
            </ng-container>
            <tr mat-header-row *matHeaderRowDef="allColumns"></tr>
            <tr mat-row *matRowDef="let row; columns: allColumns"></tr>
          </table>
        </div>
    </div>

我正在添加我要下面的输出映像。当我在1个文本框中输入一个值时，所有文本框都通过相同的插入更改。 输出

Answer 1

我通过将不同的值分配给不同的文本框来解决此问题。我已经动态添加了值，还为输入标签添加了名称字段。这给了我不同的值，以便我可以独特地使用所有文本框。

<div class="body">
        <div *ngIf="dataValue.length > 0 && displayColumns.length >0">
        <table mat-table [dataSource]="dataValue" style="width: 100%;">
            <ng-container matColumnDef="question">
          <th mat-header-cell *matHeaderCellDef></th>
          <td style="width: 10%;" mat-cell *matCellDef="let row=index">{{dataValue[row]}}</td>
          </ng-container>
          
            <ng-container
              *ngFor="let innerColumn of displayColumns;let i=index"
              [matColumnDef]="innerColumn">
            
              <th class="text-center" style="width: 20%;" mat-header-cell *matHeaderCellDef>{{displayColumns[i]}}</th>
              <td mat-cell *matCellDef="let element;let row=index">
                <mat-form-field class="example-full-width" appearance="outline">
                    <input matInput type="text" autocomplete="off"
                    [(ngModel)]="valueCheckboxMatrix[row][i]"
                    [name]="'rd'+row"
                    (change)="valueChangeMatrixTextbox($event,dataValue[row],displayColumns[i])">
                </mat-form-field>
              </td>
            </ng-container>
            <tr mat-header-row *matHeaderRowDef="allColumns"></tr>
            <tr mat-row *matRowDef="let row; columns: allColumns"></tr>
          </table>
        </div>
    </div>