Angular 如何在HTML模板中处理多个对象类型数组的对象成员？

我有两个类

FileInfo

和

UploadFileInfo

，后者扩展了前者。在我的方法中，我向数组

contents

中添加对象或任意类型

public contents: Array<FileInfo | UploadFileInfo> = new Array<FileInfo | UploadFileInfo>();

错误是

未定义标识符“进度”。'不包含 这样的成员

有办法解决这个问题吗

我的班级

export class FileInfo implements IFileInfo {
  constructor(
    public exists: boolean,
    public length: number,
    public physicalPath: string,
    public name: string,
    public displayName: string,
    public lastModified: Date,
    public validUntil: Date,
    public isDirectory: boolean,
    public isProtected: boolean,
    public isUpload?: boolean,
  ) {
    this.exists = exists;
    this.length = length;
    this.physicalPath = physicalPath;
    this.name = name;
    this.displayName = displayName;
    this.lastModified = lastModified;
    this.validUntil = validUntil;
    this.isDirectory = isDirectory;
    this.isProtected = isProtected;
    this.isUpload = isUpload;
  }
  getExtention(): string {
    return /[.]/.exec(this.name) ? /[^.]+$/.exec(this.name)[0].toLowerCase() : undefined;
  }
}

export class UploadFileInfo extends FileInfo implements IFileInfo, IUploadFileInfoStatus {
  constructor(
    public fileInfo: FileInfo,
    public isSuccess: boolean,
    public progress: number,
    public error: Array<string>,
  ) {
    super(
      fileInfo.exists,
      fileInfo.length,
      fileInfo.physicalPath,
      fileInfo.name,
      fileInfo.displayName,
      fileInfo.lastModified,
      fileInfo.validUntil,
      fileInfo.isDirectory,
      fileInfo.isProtected,
    );
    this.isSuccess = isSuccess;
    this.progress = progress;
    this.error = error;
  }
}

导出类FileInfo实现IFileInfo{
建造师(
公共存在：布尔，
公共长度：数字，
公共物理路径：字符串，
公共名称：string，
公共显示名：string，
公众最新修改日期：，
公共有效期至：日期，
公共isDirectory:boolean，
公共受保护：布尔值，
public isUpload？：布尔值，
) {
this.exists=存在；
这个长度=长度；
this.physicalPath=physicalPath；
this.name=名称；
this.displayName=displayName；
this.lastModified=lastModified；
this.validUntil=validUntil；
this.isDirectory=isDirectory；
this.isProtected=isProtected；
this.isUpload=isUpload；
}
GetExtension（）：字符串{
return/[.]/.exec（this.name）？/[^.]+$/.exec（this.name）[0].toLowerCase（）：未定义；
}
}
导出类UploadFileInfo扩展FileInfo实现IFileInfo、IUploadFileInfoStatus{
建造师(
公共文件信息：文件信息，
public issueccess:boolean，
公共进步：数字，
公共错误：数组，
) {
超级(
fileInfo.exists，
fileInfo.length，
fileInfo.physicalPath，
fileInfo.name，
fileInfo.displayName，
fileInfo.lastModified，
fileInfo.validUntil，
fileInfo.isDirectory，
fileInfo.i受保护，
);
this.issucess=issucess；
这个。进步=进步；
this.error=错误；
}
}

更新

更多模板代码

 <div draggable="true" (drop)="onDrop(content)" *ngFor="let content of (contents) let i = index" class="file-component" (dblclick)="!this.isRename ? onOpen(content) : null"
        (click)="onSelect(content, $event, i); $event.stopPropagation()">
        <div [@enterAnimation] [ngClass]="this.selectedFileIndexArray.includes(i) ? 'selected-file' : ''">
          <div *ngIf="!content.isUpload else uploadFileTemplate">
            <img style="width: 70%; height: auto;overflow: hidden;" *ngIf="content.isDirectory && !content.isProtected" src="/assets/img/file-manager/folder.png"
              alt="content.name">
            <img style="width: 70%; height: auto;overflow: hidden;" *ngIf="content.isDirectory && content.isProtected" src="/assets/img/file-manager/protected-folder.png"
              alt="content.name">
            <img style="width: 70%; height: auto;overflow: hidden;" *ngIf="!content.isDirectory && content.getExtention()" src="/assets/img/file-manager/{{content.getExtention()}}.png"
              alt="content.name">
            <img style="width: 70%; height: auto;overflow: hidden;" *ngIf="!content.isDirectory && !content.getExtention()" src="/assets/img/file-manager/unknown.png"
              alt="content.name">
          </div>
          <ng-template #uploadFileTemplate>
            <div>
              <img style="width: 70%; height: auto;overflow: hidden;" src="/assets/img/file-manager/upload.png" alt="content.name">
              <div class="upload-progress-bar-container">
                <mdb-progress [value]="content?.progress" min="0" max="100" type="success" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">
                  {{content?.progress}} <-- Error is here %</mdb-progress> 
              </div>
            </div>
          </ng-template>
          <div (click)="this.selectedFileIndexArray.includes(i) ? onRenameSelect(i) : null; $event.stopPropagation()">
            <div *ngIf="this.selectedFileIndexArray.includes(i) && renameIdx == i; else nameTemplate">
              <input [appFocus]="contentName" #contentName size="20" class="rename-box" type="text" (change)="onRename(content)" [value]="content.isDirectory ? content.name : content.displayName">
            </div>
            <ng-template #nameTemplate>
              <div class="content-name">{{content.isDirectory ? content.name : content.displayName}}</div>
            </ng-template>
          </div>
        </div>
      </div>

{{content？.progress}请在问题中添加更多的模板代码。@SiddharthAjmera，需要更多的代码added@JSON嘿，你找到解决问题的办法了吗？
 <div draggable="true" (drop)="onDrop(content)" *ngFor="let content of (contents) let i = index" class="file-component" (dblclick)="!this.isRename ? onOpen(content) : null"
        (click)="onSelect(content, $event, i); $event.stopPropagation()">
        <div [@enterAnimation] [ngClass]="this.selectedFileIndexArray.includes(i) ? 'selected-file' : ''">
          <div *ngIf="!content.isUpload else uploadFileTemplate">
            <img style="width: 70%; height: auto;overflow: hidden;" *ngIf="content.isDirectory && !content.isProtected" src="/assets/img/file-manager/folder.png"
              alt="content.name">
            <img style="width: 70%; height: auto;overflow: hidden;" *ngIf="content.isDirectory && content.isProtected" src="/assets/img/file-manager/protected-folder.png"
              alt="content.name">
            <img style="width: 70%; height: auto;overflow: hidden;" *ngIf="!content.isDirectory && content.getExtention()" src="/assets/img/file-manager/{{content.getExtention()}}.png"
              alt="content.name">
            <img style="width: 70%; height: auto;overflow: hidden;" *ngIf="!content.isDirectory && !content.getExtention()" src="/assets/img/file-manager/unknown.png"
              alt="content.name">
          </div>
          <ng-template #uploadFileTemplate>
            <div>
              <img style="width: 70%; height: auto;overflow: hidden;" src="/assets/img/file-manager/upload.png" alt="content.name">
              <div class="upload-progress-bar-container">
                <mdb-progress [value]="content?.progress" min="0" max="100" type="success" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">
                  {{content?.progress}} <-- Error is here %</mdb-progress> 
              </div>
            </div>
          </ng-template>
          <div (click)="this.selectedFileIndexArray.includes(i) ? onRenameSelect(i) : null; $event.stopPropagation()">
            <div *ngIf="this.selectedFileIndexArray.includes(i) && renameIdx == i; else nameTemplate">
              <input [appFocus]="contentName" #contentName size="20" class="rename-box" type="text" (change)="onRename(content)" [value]="content.isDirectory ? content.name : content.displayName">
            </div>
            <ng-template #nameTemplate>
              <div class="content-name">{{content.isDirectory ? content.name : content.displayName}}</div>
            </ng-template>
          </div>
        </div>
      </div>