Angular 如何为具有嵌套数组的对象创建接口

我正在创建一个简单的GET请求，以在Angular/TypeScript中列出来自集成帐户的对象。以下是回复的示例：

{
  "value": [
    {
      "properties": {
        "publicCertificate": "<publicCertificate>",
        "createdTime": "2021-03-11T19:50:03.50193Z",
        "changedTime": "2021-03-26T07:06:12.3232003Z"
      },
      "id": "/subscriptions/34adfa4f-cedf-4dc0-ba29-b6d1a69ab345/resourceGroups/testResourceGroup/providers/Microsoft.Logic/integrationAccounts/testIntegrationAccount/certificates/<integrationAccountCertificateName>",
      "name": "<integrationAccountCertificateName>",
      "type": "Microsoft.Logic/integrationAccounts/certificates"
    },
    {
      "properties": {
        "publicCertificate": "<publicCertificate>",
        "createdTime": "2021-05-27T12:45:33.455709Z",
        "changedTime": "2021-05-27T12:45:33.4564322Z"
      },
      "id": "/subscriptions/34adfa4f-cedf-4dc0-ba29-b6d1a69ab345/resourceGroups/testResourceGroup/providers/Microsoft.Logic/integrationAccounts/testIntegrationAccount/certificates/<integrationAccountCertificateName>",
      "name": "<integrationAccountCertificateName>",
      "type": "Microsoft.Logic/integrationAccounts/certificates"
    }
  ]
}

我只需要显示

公共证书

，

id

，

名称

和

类型

值。有没有更简单的方法来创建接口

编辑

这是我目前使用的服务

@Injectable()
export class integrationAccountService
{
  constructor(private httpclient: HttpClient, private api: ApiService) { }

  getcertificates(): Observable<any> {
    const httpOptions : Object = {
      headers: new HttpHeaders({
        'Authorization': 'Token'
      }),
      responseType: 'json'
    };
    return this.httpclient.get('URL', httpOptions);
  }
}

@Injectable（）
导出类集成AccountService
{
构造函数（私有httpclient:httpclient，私有api:ApiService）{}
getcertificates（）：可观察{
常量httpOptions:对象={
标题：新的HttpHeaders({
“授权”：“令牌”
}),
responseType:'json'
};
返回此.httpclient.get（'URL'，httpOptions）；
}
}

组成部分

export class CertificateTableComponent {

  dataSource: MatTableDataSource<ValueEntity>;
  certificates: ValueEntity[] = [];
  columns: string[] = ['name', 'id', 'type', 'publicCertificate'];

  @ViewChild(MatSort, { static: true }) sort: MatSort;
  @ViewChild(MatPaginator, { static:true }) paginator: MatPaginator;

  constructor(private _integrationAccountService: integrationAccountService) {
  }

  ngOnInit() {

    this._integrationAccountService.getcertificates().subscribe(response => {
      this.certificates = response.data;

      this.dataSource = new MatTableDataSource(this.certificates);
      this.dataSource.sort = this.sort;
      this.dataSource.paginator = this.paginator;

    })

  }
}

导出类CertificateTableComponent{
数据源：MatTableDataSource；
证书：ValueEntity[]=[]；
列：字符串[]=['name'，'id'，'type'，'publicCertificate']；
@ViewChild（MatSort，{static:true}）sort:MatSort；
@ViewChild（MatPaginator，{static:true}）paginator:MatPaginator；
构造函数（private\u integrationAccountService:integrationAccountService）{
}
恩戈尼尼特（）{
此.\u integrationAccountService.getcertificates（）.subscribe（响应=>{
this.certificates=response.data；
this.dataSource=新MatTableDataSource（this.certificates）；
this.dataSource.sort=this.sort；
this.dataSource.paginator=this.paginator；
})
}
}

用于显示数据的表

 <table mat-table [dataSource]="dataSource" matSort>

    <ng-container matColumnDef="name">
      <th mat-header-cell *matHeaderCellDef mat-sort-header>Name</th>
      <td mat-cell *matCellDef="let row">{{ row.name }}</td>
    </ng-container>

    <ng-container matColumnDef="id">
      <th mat-header-cell *matHeaderCellDef mat-sort-header>Id</th>
      <td mat-cell *matCellDef="let row">{{ row.id }}</td>
    </ng-container>

    <ng-container matColumnDef="type">
      <th mat-header-cell *matHeaderCellDef mat-sort-header>Type</th>
      <td mat-cell *matCellDef="let row">{{ row.type }}</td>
    </ng-container>

    <ng-container matColumnDef="publicCertificate">
      <th mat-header-cell *matHeaderCellDef mat-sort-header>Public Certificate</th>
      <td mat-cell *matCellDef="let row">{{ row.publicCertificate }}</td>
    </ng-container>

    <tr mat-header-row *matHeaderRowDef="columns"></tr>
    <tr mat-row *matRowDef="let row; columns: columns;"></tr>

  </table>

名称
{{row.name}
身份证件
{{row.id}}
类型
{{row.type}}
公共证书
{{row.publicCertificate}}

您的JSON示例数据似乎已损坏。你可以试着纠正它。一旦它是正确的，我们可以更好地帮助你

更新：

在您的服务中，如果您不返回“Observable”，而是指定已经存在的类型，这将非常有用。这样，当您访问代码中其他地方的结果数据时，您将有更好的自动完成功能：

this.http.get（languagesURL）

@Injectable（）
导出类集成AccountService
{
构造函数（私有httpclient:httpclient，私有api:ApiService）{}
getcertificates（）：可观察{
常量httpOptions:对象={
标题：新的HttpHeaders({
“授权”：“令牌”
}),
responseType:'json'
};
返回此.httpclient.get（'URL'，httpOptions）；
}
}

在您的组件中，您必须首先处理结果数据，没有“response.data”。一种方法是将接收到的数据平坦化为新的结构：

export interface FlatRow {
    name: string;
    id: string;
    type: string;
    publicCertificate: string;
}

export class CertificateTableComponent {

  dataSource: MatTableDataSource<ValueEntity>;
  //certificates: ValueEntity[] = [];
  data: FlatRow[] = [];
  columns: string[] = ['name', 'id', 'type', 'publicCertificate'];

  @ViewChild(MatSort, { static: true }) sort: MatSort;
  @ViewChild(MatPaginator, { static:true }) paginator: MatPaginator;

  constructor(private _integrationAccountService: integrationAccountService) {
  }

  ngOnInit() {

    this._integrationAccountService.getcertificates().subscribe(response => {
      //this.certificates = response.data;
      this.data = [];
      if (response.value) {
          for (let entity of response.value) {
              let row: FlatRow = {
                  name: entity.name,
                  id: entity.id,
                  type: entity.type,
                  publicCertificate: entity.properties?.publicCertificate;
              };
          }
      }

      this.dataSource = new MatTableDataSource(this.data);
      this.dataSource.sort = this.sort;
      this.dataSource.paginator = this.paginator;

    })

  }
}

导出接口扁平行{
名称：字符串；
id：字符串；
类型：字符串；
公共证书：字符串；
}
导出类CertificateTableComponent{
数据源：MatTableDataSource；
//证书：ValueEntity[]=[]；
数据：FlatRow[]=[]；
列：字符串[]=['name'，'id'，'type'，'publicCertificate']；
@ViewChild（MatSort，{static:true}）sort:MatSort；
@ViewChild（MatPaginator，{static:true}）paginator:MatPaginator；
构造函数（private\u integrationAccountService:integrationAccountService）{
}
恩戈尼尼特（）{
此.\u integrationAccountService.getcertificates（）.subscribe（响应=>{
//this.certificates=response.data；
这个.data=[]；
if（response.value）{
for（让response.value的实体）{
let row:FlatRow={
名称：entity.name，
id:entity.id，
类型：entity.type，
publicCertificate:entity.properties？.publicCertificate；
};
}
}
this.dataSource=新MatTableDataSource（this.data）；
this.dataSource.sort=this.sort；
this.dataSource.paginator=this.paginator；
})
}
}

您的JSON示例数据似乎已损坏。你可以试着纠正它。一旦它是正确的，我们可以更好地帮助你

更新：

在您的服务中，如果您不返回“Observable”，而是指定已经存在的类型，这将非常有用。这样，当您访问代码中其他地方的结果数据时，您将有更好的自动完成功能：

this.http.get（languagesURL）

@Injectable（）
导出类集成AccountService
{
构造函数（私有httpclient:httpclient，私有api:ApiService）{}
getcertificates（）：可观察{
常量httpOptions:对象={
标题：新的HttpHeaders({
“授权”：“令牌”
}),
responseType:'json'
};
返回此.httpclient.get（'URL'，httpOptions）；
}
}

在您的组件中，您必须首先处理结果数据，没有“response.data”。一种方法是将接收到的数据平坦化为新的结构：

export interface FlatRow {
    name: string;
    id: string;
    type: string;
    publicCertificate: string;
}

export class CertificateTableComponent {

  dataSource: MatTableDataSource<ValueEntity>;
  //certificates: ValueEntity[] = [];
  data: FlatRow[] = [];
  columns: string[] = ['name', 'id', 'type', 'publicCertificate'];

  @ViewChild(MatSort, { static: true }) sort: MatSort;
  @ViewChild(MatPaginator, { static:true }) paginator: MatPaginator;

  constructor(private _integrationAccountService: integrationAccountService) {
  }

  ngOnInit() {

    this._integrationAccountService.getcertificates().subscribe(response => {
      //this.certificates = response.data;
      this.data = [];
      if (response.value) {
          for (let entity of response.value) {
              let row: FlatRow = {
                  name: entity.name,
                  id: entity.id,
                  type: entity.type,
                  publicCertificate: entity.properties?.publicCertificate;
              };
          }
      }

      this.dataSource = new MatTableDataSource(this.data);
      this.dataSource.sort = this.sort;
      this.dataSource.paginator = this.paginator;

    })

  }
}

导出接口扁平行{
名称：字符串；
id：字符串；
类型：字符串；
公共证书：字符串；
}
导出类CertificateTableComponent{
数据源：MatTableDataSource；
//证书：ValueEntity[]=[]；
数据：FlatRow[]=[]；
列：字符串[]=['name'，'id'，'type'，'publicCertificate']；
@ViewChild（MatSort，{static:true}）sort:MatSort；
@ViewChild（MatPaginator，{static:true}）paginator:MatPaginator；
构造函数（private\u integrationAccountService:integrationAccountService）{
}
恩戈尼尼特（）{
此.\u integrationAccountService.getcertificates（）.subscribe（响应=>{
//this.certificates=response.data；
这个.data=[]；
if（response.value）{
for（让response.value的实体）{
let row:FlatRow={
名称：entity.name，
id:entity.id，
类型：entity.type，
publicCertificate:entity.properties？.publicCertificate；
};
}
}
this.dataSource=新MatTableDataSource（this.data）；
这是数据源
export interface FlatRow {
    name: string;
    id: string;
    type: string;
    publicCertificate: string;
}

export class CertificateTableComponent {

  dataSource: MatTableDataSource<ValueEntity>;
  //certificates: ValueEntity[] = [];
  data: FlatRow[] = [];
  columns: string[] = ['name', 'id', 'type', 'publicCertificate'];

  @ViewChild(MatSort, { static: true }) sort: MatSort;
  @ViewChild(MatPaginator, { static:true }) paginator: MatPaginator;

  constructor(private _integrationAccountService: integrationAccountService) {
  }

  ngOnInit() {

    this._integrationAccountService.getcertificates().subscribe(response => {
      //this.certificates = response.data;
      this.data = [];
      if (response.value) {
          for (let entity of response.value) {
              let row: FlatRow = {
                  name: entity.name,
                  id: entity.id,
                  type: entity.type,
                  publicCertificate: entity.properties?.publicCertificate;
              };
          }
      }

      this.dataSource = new MatTableDataSource(this.data);
      this.dataSource.sort = this.sort;
      this.dataSource.paginator = this.paginator;

    })

  }
}

getResponseArrayList(response): Array<PropertiesSource> {
    let resultList: PropertiesSource[] = [];
    resultList = response.value.map(data => {
      let res : PropertiesSource = data.properties.key.keyVault;
      res.publicCertificate = data.properties.publicCertificate;
      return res;
    });
    console.log('result ', resultList);
    return resultList;
  }