Angular 引导模式中的角度输入属性未定义

我正在尝试在Angular 4应用程序中实现引导4模式。我不确定在另一个组件中有一个组件是否会以某种方式影响行为，但我找不到为什么模态组件中的@Input参数总是未定义的原因。我想要一个表，其中的行是可点击的，点击每一个应该打开一个模式的详细信息。以下是我所拥有的：

父组件模板 子模板

---

更奇怪的是，我可以在控制台上很好地打印所选的值，但在调试时，它是未定义的，屏幕只是变成灰色（好像模态打开很好），但没有显示模态。有什么想法吗？

测试了你的代码，我想我找到了罪魁祸首！似乎是引导类的css<代码>模式淡入导致了这种情况。因此，通过删除它，您的模态应该显示良好

你完全正确，孩子标签也不需要。非常感谢：）
<table class="table table-striped table-hover table-bordered">
  <thead>
    <tr>
      <th>Appraisal</th>
      <th>Last Modification</th>
      <th>Status</th>
    </tr>
  </thead>
  <tbody>
    <tr *ngFor="let appraisal of appraisals" (click)="appraisalDetail(appraisal)">
      <td>
        <span>{{appraisal.name}}</span>
        <app-appraisal-modal *ngIf="appraisal" [selectedAppraisal]="appraisal"></app-appraisal-modal>
      </td>
      <td>{{appraisal.lastModifiedStr}}</td>
      <td class="{{appraisal.status === 'Pending' ? 'pending' : '' }}">{{appraisal.status}}</td>
    </tr>
  </tbody>
</table>

appraisalDetail(appraisal: Appraisal): void {
  const modalRef = this.modalService.open(AppraisalModalComponent);
  modalRef.componentInstance.selectedAppraisal = appraisal;
}

<div *ngIf="selectedAppraisal">
 <div class="modal fade">
<div class="modal-dialog" role="document">
  <div class="modal-content">
    <div class="modal-header">
      <h4 class="modal-title">{{selectedAppraisal.name}}</h4>
      <button type="button" class="close" 
        (click)="activeModal.dismiss('Cross click')">
        <span aria-hidden="true">&times;</span>
      </button>
    </div>
    <div class="modal-body">
      <span>{{selectedAppraisal.name}} detail goes here.</span>
    </div>
  </div>
</div>

@NgModule({
declarations: [
AppComponent,
LoginComponent,
EmployeeComponent,
AppraisalComponent,
FeedbackReferenceComponent,
AppraisalModalComponent
  ],
   imports: [
AppRoutingModule,
HttpModule,
InMemoryWebApiModule.forRoot(InMemoryDataService),
NgbModule.forRoot(),
BrowserModule,
FormsModule
  ],
  providers: [],
  entryComponents: [AppraisalModalComponent],
  bootstrap: [AppComponent]
})