Блог

Я пытаюсь создать таблицу для просмотра сертификатов в учетной записи в angular. В настоящее время появляется эта ошибка:

 ERROR Error: Error trying to diff '[object Object]'. Only arrays and iterables are allowed
 

Вот объект, который возвращается из api:

 {
  "value": [
    {
      "properties": {
        "key": {
          "keyVault": {
            "name": "AzureSdkTestKeyVault",
            "id": "/subscriptions/34adfa4f-cedf-4dc0-ba29-b6d1a69ab345/resourcegroups/testResourceGroup/providers/microsoft.keyvault/vaults/<keyVaultName>",
            "type": "Microsoft.KeyVault/vaults"
          },
          "keyName": "<keyName>",
          "keyVersion": "87d9764197604449b9b8eb7bd8710868"
        },
        "publicCertificate": "<publicCertificate>",
        "createdTime": "2017-03-06T20:33:09.7022471Z",
        "changedTime": "2017-03-06T20:33:09.7032076Z"
      },
      "id": "/subscriptions/34adfa4f-cedf-4dc0-ba29-b6d1a69ab345/resourceGroups/testResourceGroup/providers/Microsoft.Logic/integrationAccounts/testIntegrationAccount/certificates/<integrationAccountCertificateName>",
      "name": "<IntegrationAccountCertificateName>",
      "type": "Microsoft.Logic/integrationAccounts/certificates"
    }
  ]
}
 

Вот моя модель:

 export interface Certificate {
  value?: (ValueEntity)[] | null;
}
export interface ValueEntity {
  properties: Properties;
  id: string;
  name: string;
  type: string;
}
export interface Properties {
  publicCertificate: string;
  createdTime: string;
  changedTime: string;
}
 

Компонент:

 export class CertificateTableComponent {
  constructor(private _integrationAccountService: integrationAccountService) {
  }

  listcertificates:Certificate[] = [];

  ngOnInit() {
    this._integrationAccountService.getcertificates()
    .subscribe
    (
      data =>
      {
        this.listcertificates = data;
      }
    );
  }
}
 

и где я просматриваю таблицу:

 <table>
 <tr>
   <th>Public Certificate</th>
   <th>Id</th>
   <th>Name</th>
   <th>Type</th>
 </tr>

 <tr *ngFor="let cert of listcertificates">
   <td>{{cert.properties.publicCertificate}}</td>
   <td>{{cert.id}}</td>
   <td>{{cert.name}}</td>
   <td>{{cert.type}}</td>
 </tr>
</table>
 

Я поиграл с моделью и попытался получить доступ к различным значениям из ответа, но я не уверен, чего мне не хватает. Любая помощь будет признательна.

Спасибо!

РЕДАКТИРОВАТЬ Вот сервис:

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

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

 

Вы должны выполнить итерацию по value свойству listcertificates . Кроме того, оберните это в один *ngIf , потому что при инициализации компонента listcertificates у него нет value свойства. Ты можешь сделать это вот так:

 <ng-container *ngIf="listcertificates amp;amp; listcertificates.value amp;amp; listcertificates.value.length"
  <tr *ngFor="let cert of listcertificates.value">
    <td>{{cert.properties.publicCertificate}}</td>
    <td>{{cert.id}}</td>
    <td>{{cert.name}}</td>
    <td>{{cert.type}}</td>
  </tr>
</ng-container