0

我对 Angular 2/4 很陌生。目前，当我打开手风琴时，它会在手风琴内显示多个客户信息。而不是与打开的一个 clientid 相关的信息。

我有这段代码，我正在传递 clientid，所以当用户打开手风琴时。它应该只显示与该特定客户端 ID 相关的信息。

我的问题是如何在 fa-edit-client-info-list 中获取 clientId，以及如何根据 id 显示，以便显示与该特定 clientid 相关的信息。

HTML

<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-edit-client-info-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-edit-client-info-list.ts

@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": "ssmith@mailer.com",
    "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": "sam.jones@aol.com",
    "homePhone": "(646) 555-1399",
    "workPhone": "(646) 555-7886",
    "mobilePhone": "(347) 555-2034"
  }

]
4

1 回答 1

0 
    <ng-template ngFor let-client [ngForOf]="clientsArray" let-i="index">
        <tr>
            <td class="link" (click)="toggleClient(i, client)">
                <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">{{client.clientName}}</span>
            </td>
            <!--<td>{{client.accountNumber}}</td>-->
            <td>{{client.ssn}}</td>
            <td>{{client.dob}}</td>                
        </tr>
    </ng-template>
  <!-- Notice that fa-edit-client is not inside the for loop -->
  <fa-edit-client-info-list  [client]="client"></fa-edit-client-info-list>

在您的信息列表 ts 文件中

selectedClient: Client;

toggleClient(index, client): void {
        let isClose:boolean = ( this.openedIndex === index ) ? true : false;
        this.openedIndex = -1;
        this.clientId = "";
        if( !isClose ) {
          this.openedIndex = index;
          this.client = client;
        }
      }

在您的信息编辑模板中，不要忘记导入 FormsModule。

    <form>
        <input [ngModel]="client?.name" /> 
<!-- question marks are to prevent erros if client object is null -->
        <input [ngModel]="client?.ssn" />
     </form>

在您的信息编辑 ts 文件中

export class InfoEditComponent {
 @Input() client: Client; 
 // now this component works with client object which has been selected 
}
于 2017-09-13T20:53:39.087 回答