接口类型上不存在该属性

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 ，则将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 Array中的Objects上实际上不存在的属性。

试试这个代码。 它应该工作：

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