Невозможно передать значения ч / б компонентов, используя @Input

Question

Я хочу передать FailedProductId из Компонента1 в Компонент2, используя @Input, но у меня это не работает. Смотрите мой код ниже

export class Component1 implements OnInit {

public FailedProductId="produt";
constructor(private employeeService: ProductService) {}
}
}

.html файл компонента 1

<div> 
 <app-device-list [parentData]="FailedProductId"></app-device-list>

  <table>
    <th>Id</th><th>Active</th><th>Name</th><th>Platform</th><th>ManagedBy</th>

    <th> Compliant</th> <th>InProgress</th><th>Failed</th>

    <tr *ngFor="let lst of products.Products; let i = index" border="1">
      <td>{{lst.GroupName}}</td>
      <td (click)="devicesClicked()">{{lst.Compliant}}</td>
      <td>{{lst.InProgress}}</td>
      <td> <a routerLink="/devicelist/{{lst.ID.Value}}">{{lst.Failed}}</a> </td>
    </tr>

  </table>   
</div>

Component2.ts код файла

@Component({
  selector: 'app-device-list',
  template: ' <h2>{{"Hello "+ parentData}}</h2> '
})

export class Component2 implements OnInit {

  @Input() public parentData;

  }

Эта строка '<h2>{{"Hello "+ parentData}}</h2>' дает вывод Hello undefined.

Answer 1

Вы должны установить второй компонент следующим образом: а также проверить, установлены ли эти данные в первом компоненте.

@Component({
  changeDetection: ChangeDetectionStrategy.OnPush,
  selector: 'app-device-list',
  template: ' <h2>{{"Hello "+ parentData}}</h2> '
})

export class Component2 implements OnInit {

  @Input() public parentData;

  }