首页 文章

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

提问于
浏览 次
1

我正在尝试在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>

AppModule

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

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

angular bootstrap-modal bootstrap-4

1 回答

  • 2

    测试了你的代码，我想我找到了罪魁祸首！似乎类 modal fade 的bootstrap的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 玩 .

    回复于

相关问题