接口类型上不存在该属性

Question

我已经在服务器端（asp.net webapi）控制器上实现了一个对象，该对象包含boolean值和IEnumerable列表。控制器方法返回此对象。我还实现了客户端角度与对象匹配的接口。但是我遇到了错误：

  

documentDetails不包含属性documentType。

不知道为什么当界面包含此错误时会出现此错误。

服务器端：

public class DocumentTypeViewModel {
  public IEnumerable<DOCUMENT_TYPE> documentType;
  public bool canView {
    get;
    set;
  }
}

[System.Web.Http.HttpGet]
public DocumentTypeViewModel GetDocumentTypes() {
  var documentTypeViewModel = new DocumentTypeViewModel() {
    canView = (IoC.Resolve<IClientAuthorizationService>().Authorize("Put", "ResearchPanel") == AuthAccessLevel.Full),
    documentType = IoC.Resolve<IRepo<DOCUMENT_TYPE>>().GetAll().Where(x => x.IS_ACTIVE)
      .OrderBy(t => t.SORT_ORDER)
  };
  return documentTypeViewModel;
}

如果在下面看到documentDetails，则声明其类型为IDocumentTypes，并进行初始化。

export interface IDocumentTypes {
  canView: boolean;
  documentType: any;
}

documentDetails: IDocumentTypes[] = [{
  canView: false,
  documentType: null
}];

this.documentService.getDocumentTypes()
  .subscribe((data: any) => {
      this.documentDetails = data;
      this.DocumentTypes = this.documentDetails.documentType.filter(x => x.IS_ACTIVE)
        .map(o => {
          return new ListItem(o['ID'], o['NAME'], true)
        });
      this.SelectedDocTypeIds = this.DocumentTypes.map(o => {
        return o['value']
      });
      this.populateStrategies();
    },
    err => {
      this.Error = 'An error has occurred. Please contact BSG';
    },
    () => {})

屏幕截图-console.log(this.DocumentDetails)

Answer 1

this.documentDetails是一个数组。 documentType对象位于该数组的第0个索引处。

因此，您必须像这样访问它：this.documentDetails[0].documentType.(...)

此外，您正在尝试访问documentType数组中的对象上实际上不存在的属性。

尝试一下此代码。它应该可以工作：

import { Component, OnInit } from '@angular/core';

export interface IDocumentTypes {
  canView: boolean;
  documentType: any;
}

class ListItem {
  value: number;
  text: string;
  selected: boolean;

  constructor(value: number, text: string, selected: boolean) {
    this.value = value;
    this.text = text;
    this.selected = selected;
  }
}

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  name = 'Angular';
  documentDetails: IDocumentTypes[] = [{ canView: false, documentType: null }];
  DocumentTypes: Array<ListItem> = new Array<ListItem>();

  ngOnInit() {
    this.loadDocuments();
  }

  private loadDocuments() {
    this.documentDetails = documents;
    this.DocumentTypes = this.documentDetails[0].documentType.filter(x => x.IsActive)
      .map(o => { return new ListItem(o['DocumentTypeId'], o['Name'], true) });
  }
}