Question

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

component.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>

component.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，但是当我在ngFor中粘贴<ng-container *ngTemplateOutlet="content"></ng-container>时出现错误。我当时在网上寻找有关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};

}

Angular6将数据传递到ng-template

1 个答案: