Angular6 将数据传递给 ng-template

Question

我是 angular6 的新手，我有疑问。如何将数据从 ngFor 传递给 ng-template？

组件.html

 <tr *ngFor="let user of data">
      <td>{{user.id}}</td>
      <td>{{user.username}}</td>
      <td>{{user.surname}}</td>
      <td>{{user.name}}</td>
      <td>{{user.email}}</td>
      <td>{{user.joinedAt | date:'dd-MM-yyyy HH:mm'}}</td>
      <td *ngFor="let roles of user.roles">{{roles.name}}</td>
      <td><button class="btn-dark" (click)="open(content)">EDIT</button></td>
    </tr>

<ng-template #content let-c="close" let-d="dismiss">
  //cant pass data there
</ng-template>

组件.ts

export class Component implements OnInit {

  public data: any;

  constructor(private userService: UserService, private modalService: NgbModal) {
  }

  ngOnInit() {
    this.getListUsers();
  }

  getListUsers() {
    this.userService.getAll().subscribe(
      restItems => {
        this.data = restItems;
      }
    );
  }

  open(content) {
    this.modalService.open(content, {ariaLabelledBy: 'modal-basic-title'});
  }

}

我考虑使用 ng-container 但是当我粘贴<ng-container *ngTemplateOutlet="content"></ng-container>ngFor 时出现错误。我在互联网上寻找 ngtemplate/ng-container/ng-template-outlet 的教程，但关于它的信息很少。

更新！！！我找到了解决方案：https : //stackblitz.com/edit/angular-bootstrap-modal?file=app%2Fapp.module.ts

Answer 1

您可以将输入数据传递给ng-template使用context：

@Component({
  selector: 'app-root',
  template: `      
          <ng-template #estimateTemplate let-lessonsCounter="estimate">
              <div> Approximately {{lessonsCounter}} lessons ...</div>
          </ng-template>

          <ng-container *ngTemplateOutlet="estimateTemplate;context:ctx">
          </ng-container>
`})
export class AppComponent {

    totalEstimate = 10;
    ctx = {estimate: this.totalEstimate};

}