Передача данных из родительского представления в дочернее представление в Angular 2 - PullRequest
Новая
       15

Передача данных из родительского представления в дочернее представление в Angular 2

0 голосов
/ 06 ноября 2018

У меня есть представление, которое содержит таблицу соответствия с пользовательскими данными в родительском представлении при выборе записи в таблице. Я хочу иметь возможность открыть новое представление с предварительно заполненными данными выбранной строки. 

<mat-table [dataSource]="registeredUsersDataSource" matSort>

        <!-- First Name Column -->
        <ng-container matColumnDef="firstName">
          <mat-header-cell class="columnHeadingText" *matHeaderCellDef mat-sort-header> First Name
          </mat-header-cell>
          <mat-cell class="columnCellText" *matCellDef="let row"> {{row.firstName}} </mat-cell>
        </ng-container>

        <!-- Last Name Column -->
        <ng-container matColumnDef="lastName">
          <mat-header-cell class="columnHeadingText" *matHeaderCellDef mat-sort-header> Last Name </mat-header-cell>
          <mat-cell class="columnCellText" *matCellDef="let row"> {{row.lastName}} </mat-cell>
        </ng-container>

        <!-- E-mail Column -->
        <ng-container matColumnDef="emailId">
          <mat-header-cell class="columnHeadingText" *matHeaderCellDef mat-sort-header> E-mail </mat-header-cell>
          <mat-cell class="columnCellText" *matCellDef="let row"> {{row.emailId}} </mat-cell>
        </ng-container>

        <!-- Country Column -->
        <ng-container matColumnDef="country">
          <mat-header-cell class="columnHeadingText interCellPadding" *matHeaderCellDef mat-sort-header> Country
          </mat-header-cell>
          <mat-cell class="columnCellText interCellPadding" *matCellDef="let row"> {{row.country |
            codeToCountryConversion}} </mat-cell>
        </ng-container>

        <!-- Role Column -->
        <ng-container matColumnDef="role">
          <mat-header-cell class="columnHeadingText" *matHeaderCellDef mat-sort-header> Roles </mat-header-cell>
          <mat-cell class="columnCellText" *matCellDef="let row">
            <label *ngIf='row.rolesAccess[0]' class="columnCellText ">{{row.rolesAccess[0].role ===
              'API_ApplicationDeveloper' ? 'Developer' : row.rolesAccess[0].role }}</label> <br>
            <label *ngIf='row.rolesAccess[1]' class="columnCellText ">{{row.rolesAccess[1].role ===
              'API_ApplicationDeveloper' ? 'Developer' : row.rolesAccess[1].role }}</label> <br>
            <label *ngIf='row.rolesAccess[2]' class="columnCellText ">{{row.rolesAccess[2].role ===
              'API_ApplicationDeveloper' ? 'Developer' : row.rolesAccess[2].role }}</label>
          </mat-cell>

          <!-- <label *ngIf='{{row.rolesAccess[1].role}}' class="columnCellText ">{{row.rolesAccess[1].role}}</label>
              <label *ngIf='{{row.rolesAccess[2].role}}'class="columnCellText ">{{row.rolesAccess[2].role}}</label> </mat-cell>    -->
        </ng-container>

        <!-- Action Buttons Column -->
        <ng-container matColumnDef="actions">
          <mat-header-cell class="columnHeadingText" *matHeaderCellDef> Actions </mat-header-cell>
          <mat-cell class="columnCellText" *matCellDef="let row">

            <!-- Edit User -->
            <button title="Edit User" appDtsButton class="btnNoBorder" (click)="onClickRegisteredUsersEdit(row)">
              <sap-icon [iconName]="'sap-icon://edit'"></sap-icon>

              <!-- Used to pass row data into to view -->
              <app-edituser hidden="true" [value]='sujith'>
              </app-edituser>

            </button>

            <!-- Revoke User -->
            <button title="Revoke User" appDtsButton class="btnNoBorder" (click)="onClickRegisteredUsersRevoke(row)">
              <sap-icon [iconName]="'sap-icon://cancel'"></sap-icon>
            </button>
          </mat-cell>
        </ng-container>

        <mat-header-row *matHeaderRowDef="registeredUsersDisplayedColumns"></mat-header-row>
        <mat-row *matRowDef="let row; columns: registeredUsersDisplayedColumns;">
        </mat-row>
      </mat-table>

Это код, который я имею в дочернем представлении, чтобы получить данные и распечатать их. 

export class EdituserComponent implements OnInit {
@Input() value: string;

ngOnInit() {
console.log(this.value);

}

Когда я пытаюсь распечатать его, я получаю неопределенное.

В идеале я хочу иметь возможность передать объект во второй вид со всеми подробностями пользователя.

Ответы [ 2 ]

0 голосов
/ 06 ноября 2018

Здесь есть два вопроса -

  1. Передача значения @Input 
 <app-edituser hidden="true" [value]="'sujith'">
  1. Место доступа к входному значению.

Нет необходимости, чтобы у вас было значение @Input в методе ngOnInit. Вы должны искать @Input, как только представление будет готово. Так что вы можете получить его в ngAfterViewInit function 

ngAfterViewInit() {
   console.log(this.value);
}
0 голосов
/ 06 ноября 2018

Если вы используете синтаксис [], он попытается проанализировать значение. В этом примере: 

[value]='sujith'

Ищет переменную с именем sujith.

Вместо этого вы можете сделать 

[value]='"sujith"'

Или 

value='sujith'
...