接口類型上不存在該屬性

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