angular6 - 如何在 Angular6 中使用结构指令进行嵌入？

Question

我有一个共同的模式，其正文/内容会有所不同

HTML

<common-modal [data]='serverData'>
  <table class="table">
    <thead>
      <tr>
        <th scope="col">IP Address</th>
        <th scope="col">Count</th>
        <th scope="col">Keyword</th>
      </tr>
    </thead>
    <tbody>
      <tr *ngFor='let d of serverData'>
        <td>{{d.ip}}</td>
        <td>{{d.count}}</td>
        <td>{{d.keyword}}</td>
      </tr>
    </tbody>
    <tbody *ngIf='serverData?.length==0'>
      <tr>
        <td colspan='3'>
         no data to display
        </td>
      </tr>
    </tbody>
  </table>
</common-modal>

TS

import { Component, OnInit, Input } from '@angular/core';

@Component({
  selector: 'common-modal',
  templateUrl: './common-modal.component.html',
  styleUrls: ['./common-modal.component.css']
})
export class CommonModalComponent implements OnInit {
  @Input()
  serverData= []
  constructor() { }

  ngOnInit() {
  }

}

但是当我尝试打开模式时，结构指令不起作用。我如何使用 *ngIf 和 *ngFor 内部内容投影