Question

我有一个视图，其中在选择表中的某个条目时在父视图中包含一个包含用户数据的mat表，我希望能够使用预先填充的所选行数据打开一个新视图。

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

}

当我尝试打印出来时，我不确定。

理想情况下，我希望能够将包含用户所有详细信息的对象传递到第二个视图中。

Answer 1

如果使用[]语法，它将尝试解析该值。在此示例中：

[value]='sujith'

正在寻找一个名为sujith的变量。

相反，您可以做

[value]='"sujith"'

或

value='sujith'

Answer 2

这里有两个问题-

传递@Input值

 <app-edituser hidden="true" [value]="'sujith'">

您要访问输入值的地方。

您不必在ngOnInit方法中使用@Input值。视图就绪后，您应该寻找@Input。因此，您可以在ngAfterViewInit函数中获得它

ngAfterViewInit() {
   console.log(this.value);
}

在Angular 2中将数据从父视图传递到子视图

2 个答案: