Projet Angular 8 et j'ai du mal à obtenir une valeur dans un objet json à afficher sur mon modèle dans une boucle ngFor

Désolé pour mon ignorance avec les termes mais je suis principalement autodidacte, eh bien udemy pour commencer et ensuite stackoverflow pour passer à travers les choses difficiles. Habituellement, je trouve des réponses ici sans poser de questions. Ce site est essentiel et très apprécié.

Passons maintenant à mes problèmes.

Je construis un CRM rapide en angular 8 en utilisant un service cloud pour le backend, aws. C'est pour ma société de facturation médicale. En ces temps fous, nous devons tous mettre à niveau nos processus;)

J'utilise une base de données nosql, dynamodb, et certains de mes champs sont des objets json, AWSJSON, sur le backend.

J'utilise des modèles de données.

Voici mon fichier practice.model.ts Je l'ai essayé de différentes manières. Voici deux exemples et j'ai essayé de les changer de chaînes en objets JSON.

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: "{}", …}

Je suis en train de créer la page de la liste des médecins. Il s'affiche comme ceci.

Liste des médecins

Je ne sais pas si le modèle avait même besoin de changer, de toute façon.

Ma question est quel est le meilleur moyen d'afficher uniquement la valeur, pas la chaîne json entière?

Voici mon HTML

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

Pour une raison quelconque, {{practice.demographics.practiceName}} ne fonctionne pas. Dois-je utiliser split () ou y a-t-il un moyen plus élégant?

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

}

ListPractices

<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>

Voici le console.log dans la console de développement google

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

longueur: 7 proto : Array (0)