Bootstrap 模式中的 Angular Input 属性未定义

Question

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

父组件模板

<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]
})

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

Answer 1

测试了你的代码，我想我找到了罪魁祸首！似乎是 modal fade 类的引导程序 css 导致了这种情况。因此，通过删除它，您的模态应该可以正常显示！

<div *ngIf="selectedAppraisal">
<!--<div class="modal fade"> -->   <----- HERE!
<div>   <--- replaced with
<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>

而且我认为您的代码应该可以在父模板中没有子标签的情况下正常工作......即，不需要以下内容！ （检查 Plunker）

<app-appraisal-modal *ngIf="appraisal" [selectedAppraisal]="appraisal"></app-appraisal-modal>

这里有一个 Plunker 可以玩。