0
私はAngular 2/4をかなり新しくしています。現在、アコーディオンを開くと、アコーディオン内に複数のクライアント情報が表示されます。 1つのclientidに関連する情報の代わりに、オープンされたclientid。Angualr2/4 - IDに基づいてJSONから値を渡して特定の結果を表示する方法
私はこのコードを使用して、ユーザーがアコーディオンを開くときにclientidを渡しています。特定のクライアントIDに関連する情報のみを表示する必要があります。
私の質問どのようにクライアントIDをfa-edit-client-info-listの中に入れることができますか？idに基づいてどのように表示するのですか？その特定のclientidに関連する情報を表示できます。
<ng-template ngFor let-e [ngForOf]="clientsArray" let-i="index">
<tr>
<!--<tr *ngFor="let e of clientsArray; let i = index;" >-->
<td class="link" (click)="toggleClient(i, e.clientId)">
<span class="arrow">
<md-icon *ngIf="i != openedIndex">arrow_drop_down</md-icon>
<md-icon *ngIf="i === openedIndex">arrow_drop_up</md-icon>
</span>
<span class="client">{{e.clientName}}</span>
</td>
<!--<td>{{e.accountNumber}}</td>-->
<td>{{e.ssn}}</td>
<td>{{e.dob}}</td>
</tr>
<tr *ngIf="i === openedIndex">
<td colspan="4" class="expanded-contents">
<fa-edit-client-info-list [clientId]="e.clientId">
</fa-edit-client-info-list>
</td>
</tr>
</ng-template>
TS
@Component({
templateUrl: './fa-edit-client.component.html',
styleUrls: ['./fa-edit-client.component.css', '../fa.css']
})
initClients(): void {
this.faService.getLoanParticpantsAlt()
.subscribe(
(successModel: ClientModel[]) => {
this.clientsArray = successModel;
this.totalClients = this.clientsArray.length;
},
error => {
this.onError(error);
}
);
}
// toggleClient(index): void {
// let isClose:boolean = (this.openedIndex === index) ? true : false;
// this.openedIndex = -1;
//
// if(!isClose) {
// this.openedIndex = index;
//
// }
// }
toggleClient(index, clientId): void {
let isClose:boolean = (this.openedIndex === index) ? true : false;
this.openedIndex = -1;
this.clientId = "";
if(!isClose) {
this.openedIndex = index;
this.clientId = clientId;
}
}
FA-編集クライアント情報-するlist.html
<div class="section-container">
<div class="section-subtitle"> Client Information </div>
<div class="section-content">
<div fxLayout="column" fxLayout.gt-xs="row" class="row">
<!--<div fxFlex="42">
<md-input-container class="example-full-width">
<input mdInput placeholder="First name">
</md-input-container>
</div>-->
<div *ngFor="let e of clientsArray; let i = index;" >
<div class="group" fxLayout="row" fxLayoutAlign="center center">
<div fxFlex="40" class="label">SSN Number:</div>
<!--<div fxFlex="60" class="data">{{loanModel.getSsn()}}</div>-->
<div fxFlex="60" class="data">{{e.ssn}}</div>
</div>
<div class="group" fxLayout="row" fxLayoutAlign="center center">
<div fxFlex="40" class="label">DOB:</div>
<div fxFlex="60" class="data">{{e.dob}}</div>
</div>
<!--<div fxHide.gt-sm class="divider"></div>-->
</div>
</div>
</div>
</div>
FA-編集クライアント情報-list.ts
HTML
@Component({
selector: 'fa-edit-client-info-list',
templateUrl: './fa-edit-client-info-list.component.html',
styleUrls: ['./fa-edit-client-info-list.component.css', '../fa.css']
})
export class FaEditClientInfoListComponent implements OnInit {
@Input() clientId: string = "";
public popUpTitle = " Particiapnts";
public clientsArray: ClientModel[] = [];
public openedIndex: number = -1;
public totalClients: number = 0;
public addresses: string[] = [
'Sally 345 University Ave, Burlington, FL 20203, United States',
'Sally S 123 Smith St, Boyton Beach, FL 08801, United States '
];
constructor(
private coreService: CoreService,
private faService: FaService
) {
}
ngOnInit() {
this.initData();
}
initData(): void {
let isEligible:boolean = true;
this.faService.getLoanParticpantAccountsAlt(this.clientId)
.subscribe(
successModel => {
this.clientsArray = successModel;
this.totalClients = this.clientsArray.length;
},
error => {
this.onError(error);
}
);
}
// toggleClient(index): void {
// let isClose:boolean = (this.openedIndex === index) ? true : false;
// this.openedIndex = -1;
// // this.clientId = "";
// if(!isClose) {
// this.openedIndex = index;
// // this.clientId = clientId;
// }
// }
doSelect(): void {
this.coreService.closeModal("");
}
onError(error): void {
console.log("ERROR!: " + error);
}
}
JSONあなたの情報編集テンプレートで
[
{
"clientId": "0037500",
"clientName": "Sally Smith",
"accountNumber": "XXX-23657",
"ssn": "987-65-1377",
"dob": "01/11/1965",
"mailingAddress": "123 Smith Street Boyton Beach FL 08801",
"emailAddress": "[email protected]",
"homePhone": "(561) 555-6982",
"workPhone": "(561) 487-0527",
"mobilePhone": "(561) 386-7584"
},
{
"clientId": "0037450",
"clientName": "Sam Jones",
"accountNumber": "XXX-33845",
"ssn": "455-30-1122",
"dob": "06/22/1951",
"mailingAddress": "54 East Main Street Hackensack NJ 02601",
"emailAddress": "[email protected]",
"homePhone": "(646) 555-1399",
"workPhone": "(646) 555-7886",
"mobilePhone": "(347) 555-2034"
}
]