javascript - Need explanation for let-* directives in ng-template - Stack Overflow

admin管理员组

文章数量:1399887

I'm newbie in angular and right now working with some legacy code. In one ponent there is a table with let loop. Searched for it in internet but didn't understood it well.

<ng-template #itemTmpl let-data let-element="element">
  <ng-container *ngIf="data === 'route'"> {{ currentRouteSubject.value.number }} </ng-container>
  <ng-container *ngIf="data === 'name'">
    <ng-container *ngIf="!editRouteScheduleMap.has(element.id)"> {{ element[data] }} </ng-container>
    <ng-container *ngIf="editRouteScheduleMap.has(element.id)">
      <input type="text" [(ngModel)]="editRouteScheduleMap.get(element.id).name" />
    </ng-container>
  </ng-container>
  <ng-container *ngIf="data === 'requiredBusAmount'">
    <ng-container *ngIf="!editRouteScheduleMap.has(element.id)"> {{ element[data] }} </ng-container>
    <ng-container *ngIf="editRouteScheduleMap.has(element.id)">
      <input type="text" [(ngModel)]="editRouteScheduleMap.get(element.id).requiredBusAmount" />
    </ng-container>
</ng-template>

can you explain me this let-data, let-element='element', and how it connected with source file

I'm newbie in angular and right now working with some legacy code. In one ponent there is a table with let loop. Searched for it in internet but didn't understood it well.

<ng-template #itemTmpl let-data let-element="element">
  <ng-container *ngIf="data === 'route'"> {{ currentRouteSubject.value.number }} </ng-container>
  <ng-container *ngIf="data === 'name'">
    <ng-container *ngIf="!editRouteScheduleMap.has(element.id)"> {{ element[data] }} </ng-container>
    <ng-container *ngIf="editRouteScheduleMap.has(element.id)">
      <input type="text" [(ngModel)]="editRouteScheduleMap.get(element.id).name" />
    </ng-container>
  </ng-container>
  <ng-container *ngIf="data === 'requiredBusAmount'">
    <ng-container *ngIf="!editRouteScheduleMap.has(element.id)"> {{ element[data] }} </ng-container>
    <ng-container *ngIf="editRouteScheduleMap.has(element.id)">
      <input type="text" [(ngModel)]="editRouteScheduleMap.get(element.id).requiredBusAmount" />
    </ng-container>
</ng-template>

can you explain me this let-data, let-element='element', and how it connected with source file

• javascript
• node.js
• angular
• typescript
• single-page-application

Share Improve this question Follow edited Dec 13, 2019 at 7:00 Tony 20.2k77 gold badges4141 silver badges6262 bronze badges asked Aug 5, 2019 at 14:37 MassagetMassaget 37811 gold badge66 silver badges1919 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 5

The let-* attribute is a feature of the ng-template to inject a variable into the template by sourcing the variable's value from the context.

<ng-template let-data="sometext">
      <span>{{data}}</span>
</ng-template>

Maybe you can view this article to understand more about this

本文标签： javascriptNeed explanation for let* directives in ngtemplateStack Overflow