时间戳

首页 > 解决方案 > Angular 8 项目，我无法在 json 对象中获取值以在 ngFor 循环中显示在我的模板上

html - Angular 8 项目，我无法在 json 对象中获取值以在 ngFor 循环中显示在我的模板上

问题描述

对不起，我对这些条款的无知，但我主要是自学成才，很好地开始，然后用 stackoverflow 来完成困难的事情。通常，我在这里找到答案而不问问题。这个网站是必不可少的，非常感谢。

现在谈谈我的麻烦。

我正在使用后端的云服务 aws 在 Angular 8 中构建快速 CRM。这是给我的医疗计费公司的。在这些疯狂的时代，我们都需要升级我们的流程；）

我正在使用 nosql 数据库 dynamodb，我的一些字段是后端的 json 对象 AWSJSON。

我正在使用数据模型。

这是我的 practice.model.ts 文件，我尝试了几种不同的方法。这是两个示例，我尝试将它们从字符串更改为 JSON 对象。

## First One Tried ##
export interface Practice { 
 id: string;
 demographics: string;
 numbers: string;
 social: string;
 emailCampaign: string;
 history: string;
}
## Second ##
export interface Practice { 
 id: string;
 demographics: {
   practiceName: string,
   practiceSpecialty: string,
   practicePhone: number,
   practiceEmail: string
 };
 numbers: string;
 social: string;
 emailCampaign: string;
 history: string;
}

我正在构建医生列表页面。它是这样显示的。

医生名单

医生名单

无论如何，不​​确定模型是否需要更改。

我的问题是只显示值而不是整个 json 字符串的最佳方式是什么？

这是我的 HTML

<tbody>
  <tr *ngFor="let practice of practices; let i = index">
  <th scope="row">{{practice.numbers}}</th>
  <td>{{practice.demographics}}</td>
  <td class="red-text"><a class=""  [routerLink]="['/edit-practice/', practice.id]" >Practice {{practice.id}}</a ></td>
  <td>{{practice.demographics}}<br class="mb-2">
    {{practice.demographics}} </td>
  <td>
    <div class="mt-2">
      <a mdbBtn  class="mr-3 green-text" [routerLink]="['/practice/', practice.id]" floating="true"><mdb-icon fas icon="file-invoice-dollar" size="lg"></mdb-icon></a>
      <a
        (click)="onDelete(practice.id)"
        mdbBtn
        floating="true"
        class="red-text">
        <mdb-icon fas icon="trash-alt" size="lg"></mdb-icon>
      </a>
    </div>
  </td>
</tr>
</tbody>

由于某种原因 {{practice.demographics.practiceName}} 不起作用。我需要使用 split() 还是有更优雅的方式？

export class ListPracticeComponent implements OnInit {
  @ViewChild(MdbTableDirective, { static: true }) mdbTable: 
  MdbTableDirective;
  practices: any;
  isLoading = false;
  private practicesSub: Subscription;
  private searchText: string;
  private previous: string;
  headElements = ['Numbers', 'Demos', 'ID'];
  constructor(public practiceService: PracticeService, private api: 
  APIService) { }
  @HostListener('input') oninput() { this.searchItems(); }

  async ngOnInit() {
    this.isLoading = true;
    this.api.ListPractices(null, 500).then((evt) => {
    console.log(evt.items);
    this.practices = evt.items;
    console.log(this.practices);
    this.mdbTable.setDataSource(this.practices);
    this.previous = this.mdbTable.getDataSource();
  });
    this.isLoading = false;
  }
  searchItems() {
    const prev = this.mdbTable.getDataSource();
    if (!this.searchText) {
      this.mdbTable.setDataSource(this.previous);
      this.practices = this.mdbTable.getDataSource();
    }
    if (this.searchText) {
      this.practices = this.mdbTable.searchLocalDataBy(this.searchText);
      this.mdbTable.setDataSource(prev);
    }
  }
  onDelete(visitId: string) {
    this.practiceService.deleteVisit(visitId);
  }

}

列表实践

  async ListPractices(
filter?: ModelPracticeFilterInput,
limit?: number,
nextToken?: string
): Promise<ListPracticesQuery> {
  const statement = `query ListPractices($filter: ModelPracticeFilterInput, $limit: Int, $nextToken: String) {
    listPractices(filter: $filter, limit: $limit, nextToken: $nextToken) {
      __typename
      items {
        __typename
        id
        demographics
        numbers
        social
        emailCampaign
        contact1 {
          __typename
          id
          demographics
          numbers
          social
          emailCampaign
          history
          moreInfo
        }
        contact2 {
          __typename
          id
          demographics
          numbers
          social
          emailCampaign
          history
          moreInfo
        }
        contact3 {
          __typename
          id
          demographics
          numbers
          social
          emailCampaign
          history
          moreInfo
        }
        history
        note {
          __typename
          id
          content
          moreInfo
        }
        moreInfo
      }
      nextToken
    }
  }`;
const gqlAPIServiceArguments: any = {};
if (filter) {
  gqlAPIServiceArguments.filter = filter;
}
if (limit) {
  gqlAPIServiceArguments.limit = limit;
}
if (nextToken) {
  gqlAPIServiceArguments.nextToken = nextToken;
}
const response = (await API.graphql(
  graphqlOperation(statement, gqlAPIServiceArguments)
)) as any;
return <ListPracticesQuery>response.data.listPractices;
}

这是谷歌开发控制台中的 console.log

Array(7)
0: {__typename: "Practice", id: "fec9d19d-af3c-4d83-93e0-47d60cb7c647", demographics: "{"practiceSpecialty":null,"practiceName":"Practice 3","practicePhone":null,"practiceEmail":null}", numbers: "{"groupNpi":null,"providerNpi":null}", social: "{}", …}
1: {__typename: "Practice", id: "726afbd3-ee8a-45a1-8e0c-e50a5389e28b", demographics: "{"practiceSpecialty":"Primary Care","practiceName"…":"7275551234","practiceEmail":"jacob@jacob.com"}", numbers: "{}", social: "{}", …}
2: {__typename: "Practice", id: "e47c7596-c416-4c8d-af78-ca8df738e5ec", demographics: "{"practiceSpecialty":"Primary","practiceName":"ABC…":"7275555555","practiceEmail":"jacob@gmail.com"}", numbers: "{"groupNpi":"12345","providerNpi":"123456"}", social: "{}", …}
3: {__typename: "Practice", id: "c7cf847a-2360-4571-a87b-ea08befa4c5d", demographics: "{"practiceSpecialty":"Internal Medicine","practice…:"7277973798","practiceEmail":"jlaguna4@aol.com"}", numbers: "{"groupNpi":"1215206560","providerNpi":"1881683878"}", social: "{}", …}
4: {__typename: "Practice", id: "b95106e6-8e84-494a-a8a2-f847e10dc152", demographics: "{"practiceSpecialty":"Primary Care","practiceName"…ne":"practice","practiceEmail":"jacob@gmail.com"}", numbers: "{"groupNpi":"123456","providerNpi":"123456"}", social: "{}", …}
5: {__typename: "Practice", id: "83a4e0c6-4ef7-42f5-a835-ef742ab5b8a7", demographics: "{"practiceSpecialty":"Primary Care","practiceName"…":"7275555555","practiceEmail":"jacob@gmail.com"}", numbers: "{}", social: "{}", …}
6: {__typename: "Practice", id: "0c058f05-b017-4a90-be0a-e94b77ba52ad", demographics: "{"practiceSpecialty":"Oncology","practiceName":"Te…16093","practiceEmail":"zeferino34233@yahoo.com"}", numbers: "{"groupNpi":"123","providerNpi":"1992738058"}", social: "{}", …}

长度：7 原型：数组（0）

标签： htmltypescriptangular8

解决方案

我认为您的做法是 Observables，因此您需要在模板中使用异步管道：

<tr *ngFor="let practice of practices | async; let i = index">

然后，在您的 html 中，您说您的列显示整个对象practice.demographics而不是practice.demographics?.practiceName

  • 尝试使用“？” 对于模板中的对象，以避免在对象为空或未定义时出错
  • 确保所有模型字段都来自您的 json 值（首字母小写）

  • 为 Demographics 对象使用自定义类/接口

    导出接口练习{id：字符串；人口统计：人口统计；数字：字符串；社交：字符串；emailCampaign：字符串；历史：字符串；}

        export interface Demographics {
       practiceName: string,
       practiceSpecialty: string,
       practicePhone: number,
       practiceEmail: string
    }

推荐阅读