无法在角度材料表中获得正确的值

问题描述

我无法正确获得动态索引的角度材料 7 表。 我正在使用 angular 7 和 angular material 7。

在我的 html 代码下面找到

                    <div fxLayoutAlign="end">
                  <div class="mt" fxFlex.gt-sm="20" fxFlex.gt-xs="20" fxFlex="100">
                    <button mat-raised-button color="accent" (click)="newSourceFile()">Add source file</button>
                  </div>
                </div>
                  <mat-table #table [dataSource]="fileList | keyvalue: keyOrder">

                    <!-- Position Column -->
                    <ng-container matColumnDef="name">
                      <mat-header-cell *matHeaderCellDef fxFlex="20%">
                        <span>Type </span>
                      </mat-header-cell>
                      <mat-cell *matCellDef="let element;let i = index" fxFlex="20%">
                        <div *ngIf="element.value.type!='Custom'">{{element.value.name}} </div><br>
                        <div *ngIf="element.value.type=='Custom'">
                          <mat-form-field class="example-full-width">
                            <mat-label>Name</mat-label>
                            <input matInput placeholder="" value=""
                              (keyup)="validateCustomInput($event,element,i)" [(ngModel)]="element.value.name">
                          </mat-form-field>
                        </div><br>
                      </mat-cell>
                    </ng-container>

                    <!-- Name Column -->
                    <ng-container matColumnDef="fileName">
                      <mat-header-cell *matHeaderCellDef fxFlex="60%"><span> Name</span> </mat-header-cell>
                      <mat-cell *matCellDef="let element;let j = index" fxFlex="60%" fxLayout="column"
                        fxLayoutAlign="center start">
                        <span class="header-label">Name:</span>
                        <!-- <div *ngIf="uploadProgres[element.value.name]">Uploading:
                        {{uploadProgres[element.value.name]}}
                      </div> -->
                        <button class="m-r-20 mat-raised-button " [class.hasFile]="element.value.fileDto?.fileName">
                          <label class="mat-button-wrapper inputFileLabel" for="{{element.value.type}}">Select File
                          </label>


                          <input type="file" class="hideInput" id="{{element.value.type}}"
                            (change)="handleFileInput($event,element)" onclick="this.value=null;"
                            accept="{{element.value.supportedType}}">
                        </button>

                        <div class="mat-button-wrapper inputFilediv" *ngIf="element.value.fileDto?.fileName">
                          {{element.value.fileDto.fileName}}</div>

                      </mat-cell>
                    </ng-container>

                    <!-- Symbol Column -->
                    <ng-container matColumnDef="actions">
                      <mat-header-cell *matHeaderCellDef fxFlex="15%"><span> Actions</span> </mat-header-cell>
                      <mat-cell *matCellDef="let element" fxFlex="15%" fl>
                        <!-- <span class="header-label">Download</span>
                <a class="link" href="javascript:void(0)" (click)="downloadSourceFile(element.value)"
                  *ngIf="element.value.fileDto?.id != null">
                  <mat-icon mat-list-icon>cloud_download</mat-icon>
                </a> -->
                        <a class="link" href="javascript:void(0)" (click)="deleteSourceFile(element.value)"
                          *ngIf="element.value.fileDto?.fileName != null">
                          <mat-icon mat-list-icon>delete_outline</mat-icon>
                          <!-- <mat-icon *ngIf="!element.value.fileDto?.fileName" mat-list-icon></mat-icon>
                <mat-icon *ngIf="element.value.fileDto?.fileName" mat-list-icon>delete_outline</mat-icon> -->
                        </a>
                      </mat-cell>
                    </ng-container>

                    <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
                    <mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>
                  </mat-table>

下面是component.ts代码

handleFileInput(fileInput: any,file) {
       console.log(fileInput,file);
}

newSourceFile() {
    this.customSourceFile++;
    let name = 'Source File'+ this.customSourceFile;
    this.fileList[name] = { name: name,supportedType: '.pdf',fileDto: null,fileObj: null,type: 'Custom' };
  }

fileList =     {
            "Protocol": { name: 'Protocol',type: "Protocol",isShow: true },"CRF": { name: 'CRF',type: 'CRF',"SAP": { name: 'SAP',supportedType: '.docx',type: 'SAP',"Intext": { name: 'IN-TEXT table',type: 'Intext',"TLF-T": { name: 'TLF-Table',type: 'TLF-Table',"TLF-L": { name: 'TLF-Listing',type: 'TLF-Listing',"TLF-F": { name: 'TLF-figures',type: 'TLF-figures',};
        return sds;
    }

**问题：**单击“添加源文件”按钮将向文件列表添加一个新对象。添加 3 个文件后，如果单击最后一个“选择文件”按钮，我在 handleFileInput(fileInput: any,file) 方法中得到错误的对象。

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）