Angular -如何在NgFor中创建动态模板变量
Angular是一种流行的前端开发框架，它使用TypeScript编写，并由Google维护。Angular提供了丰富的功能和工具，使开发人员能够构建现代化的Web应用程序。
在NgFor中创建动态模板变量可以通过使用ng-template指令和TemplateRef类来实现。下面是一个示例：
<ng-container *ngFor="let item of items; let i = index">
<ng-template #dynamicTemplate>
<div #dynamicVar>{{ item }}</div>
</ng-template>
</ng-container>在上面的示例中，我们使用ng-container元素来包裹ng-template元素，并使用*ngFor指令来循环遍历items数组。在ng-template元素中，我们定义了一个动态模板变量dynamicVar，它会在每次循环迭代时动态生成。
要在组件中访问动态模板变量，我们可以使用ViewChild装饰器和TemplateRef类。在组件类中添加以下代码：
import { Component, ViewChild, TemplateRef } from '@angular/core';
@Component({
selector: 'app-example',
template: `
<ng-container *ngFor="let item of items; let i = index">
<ng-template #dynamicTemplate>
<div #dynamicVar>{{ item }}</div>
</ng-template>
</ng-container>
`
})
export class ExampleComponent {
@ViewChild('dynamicTemplate', { read: TemplateRef }) dynamicTemplate: TemplateRef<any>;
@ViewChild('dynamicVar') dynamicVar: ElementRef;
items = ['Item 1', 'Item 2', 'Item 3'];
ngAfterViewInit() {
console.log(this.dynamicTemplate); // 输出动态模板的引用
console.log(this.dynamicVar); // 输出动态模板变量的引用
}
}在上面的示例中，我们使用ViewChild装饰器来获取动态模板和动态模板变量的引用。通过设置{ read: TemplateRef }选项，我们告诉Angular我们想要获取TemplateRef类的实例。
这是一个简单的示例，演示了如何在NgFor中创建动态模板变量。根据具体的应用场景，你可以根据需要自定义模板，并在组件中进行相应的操作。
腾讯云提供了丰富的云计算产品和服务，适用于各种应用场景。你可以访问腾讯云官方网站（https://cloud.tencent.com/）了解更多关于腾讯云的信息和产品介绍。
相关·内容
2回答
将模板动态传递给子组件
angular、typescript、ng-template
我想根据活动导航点动态加载我的页面内容。
export class Sub_navigation_item {
constructor(
public title: string,
public templateName: string
) {}
}
因此，我有一个带有来自ng-template的ID的导航条目。我想根据这个ID将内容传递给子组件。
以下是我的导航项目：
this.navbarItems = [
new Sub_navigation_item('General', 'generalTemplat
浏览 11提问于2020-11-02得票数 1
2回答
<ng-template>在其他组件中显示
javascript、angular、angular-components
我有两个组件。
父组件的.html代码如下：
<div class="space">
<ng-container *ngFor="let item of items">
<ng-container [ngTemplateOutlet]="itemTemplate" [ngTemplateOutletContext]="{item: item}">
</ng-container>
</ng-container>
</di
浏览 28提问于2020-05-07得票数 0
回答已采纳
2回答
Angular4模板
javascript、angular、typescript
我编写了一个简单的代码来演示ngTemplate
<div> <ng-container [ngTemplateOutlet] ="template1"> </ng-container></div>
下面是模板
<ng-template #template1> This is 1st template </ng-template>
<ng-template #template2>This is 2nd template </ng-template>
它按预期工作，但我的问题
浏览 0提问于2017-09-07得票数 1
回答已采纳
1回答
理解可重用组件中的ngTemplateOutlet、@ContentChild、ng容器
javascript、angular
我花了更多的时间试图理解下面的博客文章
以上职位的工作代码可在上找到。
在card-or-list-view组件中，调用UsageExample组件。提供了项、和模式输入参数，我对此非常了解。
现在我不明白的是
<ng-container *cardItem="let item">
<h1>{{item.header}}</h1>
<p>{{item.content}}</p>
</ng-container>
<span *listItem=&#
浏览 2提问于2019-02-23得票数 3
回答已采纳
2回答
ElementRef与TemplateRef在angular4中的差异
angular、elementref
我看到了许多ElemenetRef和TemplateRef的例子，这让我更加困惑。
ElementRef和TemplateRef之间的区别是什么?为什么我们应该使用一个而另一个
<ng-template #element>
<div style="border:solid 3px yellow;width:250px;
height:250px;position:relative;top:0px;">
this is my element
</div>
</ng-template>
<ng-c
浏览 0提问于2018-11-19得票数 15
回答已采纳
5回答
角2模板中的Pass变量
javascript、angular
有什么方法可以在Angular2中将变量传递给模板吗？
假设我有以下代码：
<div *ngFor="foo in foos">
<ng-container *ngTemplateOutlet="inner"</ng-container>
</div>
---------------
<ng-template #inner>
{{ foo.name }}
</ng-template>
如何获得打印name of foo的模板？
浏览 5提问于2017-05-01得票数 27
回答已采纳
2回答
组件内部的访问模板变量
javascript、angular、typescript、angular5
我遇到了一个关于ng模板的问题。
我们正在通过ngTemplateOutletContext传递一些参数，如表组件中的下面所示。根据所包含的数据类型，我们对单元格使用不同的渲染器。请注意单元格值参数，因为它是我所需要的。
<ng-container *ngIf="useCellRenderer(column, row)">
<ng-template [ngTemplateOutlet]="column.renderer.templateref" [ngTemplateOutletContext]="{ cellvalue: row
浏览 0提问于2018-07-03得票数 5
回答已采纳
2回答
例如，假设我想实现datatable组件，可以将每个列的单元格的可选模板传递给该组件：
@Component({
selector: 'datatable',
template: `
<table>
<tbody>
<tr *ngFor="let row of rows">
<td *ngFor="let col of columns">
<ng-container *ngIf="getTemplate(col)">
浏览 0提问于2018-04-06得票数 0
回答已采纳
3回答
动态ngTemplateOutlet值
angular、angular2-template、angular2-directives
有没有办法动态设置*ngTemplateOutlet指令的值？
一些类似的东西：
<div *ngFor="let item of [ 'div', 'span' ]">
<ng-container *ngTemplateOutlet="{{ item }}"></ng-container>
</div>
<ng-template #div>
<div>some text inside a div</div>
</ng-templa
浏览 0提问于2017-04-24得票数 11
2回答
在函数中选择ng模板引用并将其返回给ngTemplateOutlet？
angular、typescript
我的组件中有20个不同的ng-templates。根据某些@Input()，应该选择一个ng-template并在ng-container中呈现它。一个函数将检查要选择的合适模板，并将结果返回给我的ng-container的*ngTemplateOutlet。此外，ng-container位于ngFor中，因此将根据输入选择多个不同的模板。下面是该结构的快速概述：
<table>
<tbody>
<tr *ngFor="let row of data; let rowIndex = index">
浏览 41提问于2020-06-04得票数 0
1回答
如何将数据传递到ng容器中？
angular、angular-template
抱歉的。我对角很陌生:)
我试图把一些数据传递给一个模板
下面是调用sharedComponent的组件
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'sym-test',
templateUrl: './test.component.html',
styles: []
})
export class TestComponent implements OnInit {
items = [
'1
浏览 1提问于2020-01-15得票数 2
回答已采纳
2回答
角传递多个模板到组件
angular、angular-components、angular-template
我正在尝试创建一个组件，它接受多个模板作为输入。这就是我的例子：
@Component({
selector: 'data-list',
styles: [
require('./data-list.component.scss')
],
template: `
<ng-template
*ngFor="let item of itemsData"
ngFor let-item [ngForOf]="[item]"
浏览 3提问于2017-04-26得票数 18
回答已采纳
1回答
一次在多个地方使用相同的TemplateRef -克隆人TemplateRef？
angular、angular6
我正在尝试构建一个多选择组件，它可以为每个select选项元素接受一个模板。大多数情况下，模板是从选项组件中的ng内容中抓取的，并显示在"select popover“中。
当试图在select组件中显示所选选项时，我遇到了问题。似乎模板一次只能在一个地方显示，所以当选择选项显示在select中时，它将从弹出窗口中移除。
有没有办法克隆TemplateRef组件？实际上，我不介意上下文没有更新模板，因为我目前没有使用模板中的任何内容，只使用模板。
为了清晰起见，下面包括了一些代码片段，不过我认为没关系。
somepage.component.html**:**中的使
浏览 0提问于2018-10-30得票数 5
2回答
间接递归Ng-角度6中的模板
angular6
<ng-template #list let-Items>
<ul>
<li *ngFor="let i of Items">
<ng-container [ngTemplateOutlet]="container" [ngTemplateOutletContext]="{$implicit: i}"></ng-container>
</li>
</ul>
</ng-template>
浏览 0提问于2018-11-19得票数 0
1回答
自定义Angular 2+步进器模块
angular8、stepper
在一开始我想说，我知道有准备使用步骤从CDK或材料，但我想创建“我自己的”，以便学习角度8。
老实说，我不知道我现在应该在哪里搜索帮助，这就是为什么我决定在这里写。也许有人会给我一些建议，我会在最后发表我的作品。
那么让我们开始吧:索引HTML代码如下所示：
<stepper>
<step>
<ng-template step-label>First name</ng-template>
<input placeholder="First name" required>
<div>
浏览 0提问于2019-10-25得票数 0
2回答
角度-动态地将组件注入另一个组件中。
angular、typescript
为了个人的需要和乐趣，我正在开发一个小的UI组件框架。我正在开发一个Tab组件，为了测试目的，我需要在另一个组件(TabComponent)中动态注入一个组件(TabComponent)。下面是我的两个组件的代码：
tab.component.ts:
import {Component, ContentChildren} from "@angular/core";
import {TabContainerComponent} from "./tabContainer.component";
@Component({
selector: 'tab
浏览 0提问于2018-07-24得票数 13
1回答
如何在Angular中使用模板引用动态呈现ng-template
html、angular、forms、ng-template、ng-container
我尝试了这个问题中的示例，但仍然没有成功。
我想根据用户选择的选项动态显示ng-template表单。
我在component.ts中定义了全局变量和3个表单及其模板引用
@ViewChild('formA', {static: false}) formAref: TemplateRef<any>;
formA = new UserForm('formA', 'Mus Mauris Form', this.formAref);
@ViewChild('formB', {static: true}) formBref:
浏览 32提问于2019-11-20得票数 1
回答已采纳
1回答
角度动态#
angular
在Angular中，您可以使用#来标识如下指令：
<div #actualTarget></div>
我需要像这样让我的代码动态化：
<div #{{l + '-' + n}}></div>
这样做的正确方法是什么？
<div class="list-cont shadow" *ngFor="let cat of categories; let l = index">
...
<ul class="responder" *ngFor="let res
浏览 0提问于2020-03-01得票数 1
1回答
我可以从字符串创建一个TemplateRef吗？
angular
我得到的组件
假设我有以下超级简单的组件：
class MyComponent {
@Input()
simpleContent: string;
@ContentChild(TemplateRef)
content: TemplateRef<any>;
}
<div>
<div *ngIf="simpleContent; else complexContent">{{simpleContent}}</div>
<ng-template #complexContent>
浏览 4提问于2019-03-03得票数 20
2回答
使用ngTemplateOutlet的Angular 2+
angular、typescript
我正在尝试遵循这个教程：
但是如果我复制代码，它就不能工作。它显示：
<ul>
<li></li>
</ul>
而不是
<ul>
<li>Static List Template</li>
</ul>
这些属性仍未定义：
@ContentChild(CardItemDirective, {read: TemplateRef}) cardItemTemplate;
@ContentChild(ListItemDirective, {read: TemplateRef}) listItemTempla
浏览 7提问于2018-07-25得票数 0
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
即时通信 IM
ICP备案
对象存储
实时音视频活动推荐
腾讯云开发者
