Извините за мое незнание терминов, но я в основном самоучка, хорошо подхожу для начала, а затем стекаю поток, чтобы пройти через сложные вещи. Обычно я нахожу ответы здесь, не задавая вопросов. Этот сайт очень важен и ценится.
Теперь о моих проблемах.
Я создаю быструю CRM в angular 8 , используя облачный сервис для бэкэнда, aws. Это для моей медицинской биллинговой компании. В эти сумасшедшие времена нам всем нужно обновить наши процессы;)
Я использую базу данных no sql, dynamicodb, , и некоторые из моих полей - 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);
}
}
ListPractices
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 в консоли разработчика Google
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)