从返回的响应中为接口创建自定义字段答案

【问题标题】：Create custom fields for Interface from Returned Response从返回的响应中为接口创建自定义字段
【发布时间】：2020-06-27 00:04:51
【问题描述】：

我从我的 SPFX Web 部件调用的 Web 服务具有以数字开头的属性：30DaysTotal、60DaysTotal 和 90DaysTotal。

我已经创建了一个接口来实现这个：

export interface ISummary {
    Id : number;
    "30DaysGrandTotal": number;
    "60DaysGrandTotal": number;
    "90DaysGrandTotal": number;
}

经过一些研究，我发现如果我在变量周围添加语音标记，那么它就会被接受。

然后我使用以下开箱即用的标准来读取值：

this.context.aadHttpClientFactory
      .getClient('('*********************',')
      .then((client: AadHttpClient): void => {
        client
          .get('*********************', AadHttpClient.configurations.v1)
          .then((response: HttpClientResponse): Promise<ISummary> => {
            return response.json();
          })
          .then((summary: ISummary): void => {

            console.log(summary);
            
             let summaryList: string='';

            summaryList = `
              <li>${summary.Id}</li>
              <li>${summary.30DaysGrandTotal}</li>
              <li>${summary.60DaysGrandTotal}</li>
              <li>${summary.90DaysGrandTotal}</li>              
             `;

            this.summaryDetailsElement.innerHTML = `
              <div name="summary" id="summary"><ul>${summaryList}</ul></div>`;
          });
      });

我无法构建解决方案，因为它抱怨带有以下错误的变量：

[16:42:03] Error - [tsc] src/webparts/aadHttpClient/AadHttpClientWebPart.ts(189,28): error TS1005: '}' expected.
[16:42:03] Error - [tsc] src/webparts/aadHttpClient/AadHttpClientWebPart.ts(189,31): error TS1005: ';' expected.
[16:42:03] Error - [tsc] src/webparts/aadHttpClient/AadHttpClientWebPart.ts(189,46): error TS1005: ',' expected.
[16:42:03] Error - [tsc] src/webparts/aadHttpClient/AadHttpClientWebPart.ts(189,47): error TS1110: Type expected.
[16:42:03] Error - [tsc] src/webparts/aadHttpClient/AadHttpClientWebPart.ts(189,48): error TS1161: Unterminated regular expression literal.

如果我用代码构建的变量注释掉 3 行，我可以在控制台日志中看到带有值的摘要类。

我的问题是我需要更改哪些变量才能构建代码？

【问题讨论】：

标签： typescript spfx

【解决方案1】：

我就是看不到，这么简单:)

<li>${summary["30DaysGrandTotal"]}</li>

【讨论】：