无法使用@Input传递值b / w组件>> [

Question

我想使用FailedProductId将@Input从Component1传递到Component2，但它对我不起作用。请参阅下面的代码

export class Component1 implements OnInit {

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

Component1的[.html文件]

<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。

我想使用@Input将FailedProductId从Component1传递到Component2，但它对我不起作用。请参阅下面的代码，导出类Component1实现OnInit {public FailedProductId =“ produt”; ...

Answer 1

您必须这样设置第二个组件：并检查是否在第一个组件中设置了该数据。