我在模板中有一个条件如下:

<ng-container>
    <p *ngFor="let seat of InfoDetails?.seatInfo">
        <template *ngIf="seat.section">
            Section {{seat?.section}} ,
        </template>
        <template *ngIf="seat.row">
            Row {{seat?.row}},
        </template>
        <template *ngIf="seat.seatNo">
            Seat number {{seat?.seatNo}}
        </template>
    </p>
</ng-container>

我有包含row和的数据集seatNo,但它似乎没有在模板中打印.这是什么问题？

我正在尝试构建此模板:

<ul>
    <li *ngFor='let link of links'>
        <ng-container *ngIf="link.type == 'complex'; then complexLink else simpleLink"></ng-container>
    </li>
</ul>

<ng-template #simpleLink>
    ...
    {{ link.some_property }}
</ng-template>

<ng-template #complexLink>
    ...
    {{ link.some_property }}
</ng-template>

问题是在ng-template中未定义链接变量,因此我得到访问未定义的'some_property'的错误.

我很想知道如何将链接变量从ngFor传递到ng-template

很高兴知道这个问题是否有多种解决方案.

如何在angular2 ng-templates中使用以下关键字

• $implicit角度2模板的目的是什么？
• let-<attribute>和之间的关系是什么$implicit？

我有一个有角度的4页,包括一个ng-bootstrap模态.我的代码看起来像这样.

foo.html

[...]
<button class="btn btn-sm btn-secondary material-icons"
(click)="open(content)">search</button>

<ng-template #content let-c="close" let-d="dismiss">
    content in here
</ng-template>
[...]

foo.ts

[...]
constructor(private modalService: NgbModal) { }
[...]
open(content) {
   let options: NgbModalOptions = {
     size: 'lg'
   };

   this.modalService.open(content, options);
}
[...]

现在当我点击按钮时,模态打开.我现在要做的是在ngChanges上打开模型.

ngOnChanges(changes: any) {
   open(content)
}

我的问题是:我如何获得"内容"？有没有办法以编程方式获取ng-template？提前致谢!

今天我不得不修复由此代码引起的性能问题:注意在模板内部调用的updateStats

<script type="text/ng-template" id="entityGrouper">

<section>

<div>
<ul ng-click="hideEntityBox = !hideEntityBox">
<li>
{{ entityNode.name }}
</li>
<li ng-repeat="breadcrumbItem in entityNode.breadcrumb">
{{ breadcrumbItem }}
</li>
</ul>
{{ updateStats(entityNode) }}
<span ng-include="'/mypath/views/resume.html'"></span>
</div>

<div>

<div ng-repeat="entityNode in entityNode.group" ng-include="'entityGrouper'"></div>
<div ng-repeat="entity in entityNode.group" ng-include="'entityBox'"></div>

</section>

</script>

模板使用:

<div ng-repeat="entityNode in entityNode.group" ng-include="'entityGrouper'"></div>

在调试这段代码后,我发现这个函数被调用的时间比数组大小多很多(我的数组有4个对象,函数被调用超过100次),甚至鼠标悬停都调用了这个函数.我通过在模板中放置一个ng-init来修复它,现在它正常工作,但我没有弄清楚为什么这个函数被调用了很多次.有没有关于双向数据绑定的东西？

如果使用带有then/else语法的模板,如何将ngFor循环中的当前变量传递给ngIf？

看起来它们在内联时使用时很好,但是无法从模板访问,例如:

<ul *ngFor="let number of numbers">
  <ng-container *ngIf="number % 2 == 0; then even_tpl; else odd_tpl"><>/ng-container>
</ul>


<ng-template #odd_tpl>
  <li>Odd: {{number}}</li>  
</ng-template>

<ng-template #even_tpl>
  <li>Even: {{number}}</li>  
</ng-template>

模板似乎根本没有访问权限number,但如果内联使用它可以工作.

以下链接中的工作版和非工作版的完整示例:plunkr

angular2如何使用来自不同文件的ng-template？当我将ng-template放在我使用它的同一个HTML中时,但是当我将ng-template移动到一个单独的文件中时,它将无法工作.有没有办法将ng-template移动到自己的文件中并在不同的html文件中使用它？

INFO-message.html

<ng-template #messageTemplate>
    Hi
</ng-template>

<ng-container *ngTemplateOutlet="messageTemplate;"></ng-container>

以上工作正常,因为ng-template和用法在同一个文件中

消息template.html

<ng-template #messageTemplate>
    Hi
</ng-template>

INFO-message.html

<ng-container *ngTemplateOutlet="messageTemplate;"></ng-container>

这不起作用.有没有办法使用"messageTemplate",它位于另一个html中的单独文件中(例如:info-message.html)

提前致谢.

在我的Angular 6应用中，我需要将Component作为其ng-template传递给另一个Component 。

原因是我有一个组件A，需要多次复制，但是每次它必须包含具有相同Inputs的不同组件（我们称它们为Component B和Component C）。

<div class="row-detail-panel">
  <h4 class="row-detail-panel-title">{{ newEntity ? 'Add new' : 'Edit this'}} {{ entityName }}</h4>

  <!--THIS IS THE COMPONENT I WANT TO INJECT-->
  <app-component-b
    [inline]="true"
    [form]="form"
  ></app-component-b>
  <!--END-->

  <!--some more html code here-->
</div>

<app-component-a
  [entity]="row"
  [entityName]="entityName"
></app-component-a>

<div class="row-detail-panel">
  <h4 class="row-detail-panel-title">{{ newEntity ? 'Add new' : 'Edit this'}} {{ entityName }}</h4>

  <ng-template></ng-template> …