Question

我有两个类FileInfo和UploadFileInfo，后者扩展了前者。在我的方法中，我将对象或任一类型添加到数组contents。

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

在我的HTML模板中，我使用ngFor遍历内容。

我的问题是在HTML模板中，我无法运行类型检查，并且遇到有关UploadFileInfo成员为anonymous的错误。显然，模板将第一个FileInfo用作引用类型。

即

 <div *ngIf="content?.progress"></div>

错误是

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

有没有办法解决这个问题？

我的课程，

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;
  }
}

更新

更多模板代码，

 <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>

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

0 个答案: