angular为什么集合不能在模板中呈现
Angular是一个流行的前端开发框架，它采用了组件化的开发模式。在Angular中，组件是应用程序的基本构建块，每个组件都有自己的模板用于呈现内容。
在Angular中，模板是用HTML编写的，用于描述组件的外观和交互。模板中可以包含各种HTML元素、指令和绑定，用于展示数据和响应用户的操作。
然而，Angular的模板语法是静态的，它只能在编译时解析和处理。这意味着模板中的集合（如数组或对象）不能直接在模板中呈现。如果要在模板中展示集合的内容，需要使用Angular提供的结构型指令，如ngFor。
ngFor指令可以在模板中循环遍历集合，并为每个元素生成相应的HTML内容。通过ngFor指令，我们可以将集合中的数据动态地呈现在模板中。
举个例子，假设我们有一个名为"items"的数组，我们可以使用ngFor指令在模板中循环遍历该数组，并为每个元素生成一个列表项：
<ul>
<li *ngFor="let item of items">{{ item }}</li>
</ul>在上面的例子中，ngFor指令会遍历"items"数组，并为数组中的每个元素生成一个li元素。每个li元素的内容将为对应的数组元素。
总结起来，Angular中的模板不能直接呈现集合，但可以使用ngFor指令来循环遍历集合并在模板中呈现其内容。
腾讯云相关产品和产品介绍链接地址：
- 腾讯云官网：https://cloud.tencent.com/
- 云服务器（CVM）：https://cloud.tencent.com/product/cvm
- 云数据库 MySQL 版：https://cloud.tencent.com/product/cdb_mysql
- 云原生应用引擎 TKE：https://cloud.tencent.com/product/tke
- 人工智能平台（AI Lab）：https://cloud.tencent.com/product/ailab
- 物联网开发平台（IoT Explorer）：https://cloud.tencent.com/product/iothub
- 移动开发平台（移动推送、移动分析）：https://cloud.tencent.com/product/mps
- 云存储（对象存储 COS）：https://cloud.tencent.com/product/cos
- 区块链服务（TBaaS）：https://cloud.tencent.com/product/tbaas
- 腾讯云元宇宙：https://cloud.tencent.com/solution/virtual-world
相关·内容
1回答
Angular4 : ngFor with variable or number:未来有计划吗？
angular、ngfor
我想知道，Angular团队是否计划为ngfor添加一个数字或变量？这对于开发来说将是非常舒适的。
目前，我们必须创建一个伪表
fakeArray = new Array(12);，然后是<li *ngFor="let a of fakeArray"></li>
感谢你的社区。
浏览 7提问于2018-01-16得票数 1
回答已采纳
2回答
事件绑定如何处理传入的值
javascript、angular
我是事件绑定的新手，我不明白为什么以及如何在()中传递一个值以及它的值是如何加载的。我正在关注Angular 的哪个部分
<li *ngFor="let hero of heroes" (click)="onSelect(hero)">
哪里
selectedHero: Hero;
onSelect(hero: Hero): void {
this.selectedHero = hero;
}
我不知道(英雄)是从哪里来的，也不知道如何加载哪些数据
浏览 0提问于2018-01-01得票数 0
1回答
在我的HTML模板中我做错了什么？
javascript、html、angular、observable
说到可观察的角度，我还不舒服，所以我在训练自己。
我正在编写一个小应用程序来管理拳击俱乐部。
我想向大家展示最近三次选秀的拳击手。
所以我尝试了以下几种方法
<div class="col-6">
<div *ngIf="lessons">
<div *ngIf="(lessons|async).length > 0">
<h2>les 3 derniere lessons </h2>
浏览 6提问于2019-10-26得票数 0
回答已采纳
1回答
ViewContainerRef对ngFor
angular、dom、ngfor、angular-dynamic-components
还有什么更好的？使用ngFor或ViewContainerRef动态创建组件？有什么关系？
例如，如果我有一个按钮来创建一个新元素，每当我按下它就会生成一个新的组件。
1)第一种选择如下
items: number[] = [];
addItem() {
this.items.push(1);
}
<my-component *ngFor="let item of items"></my-component>
2)第二种选择
@ViewChild('viewContainerRef', { read: ViewContainerR
浏览 0提问于2020-01-31得票数 3
回答已采纳
4回答
Angular2 ngFor不工作
javascript、angular、atom-editor、ngfor
我正在尝试实现一个基本的购物清单，但是我在Angular中的ngFor不工作。
import { Component, View } from 'angular2/angular2';
@Component({
selector: 'my-app'
})
@View({
template: '<h1>{{title}}</h1><ul><li *ngFor="let i of items"><span>{{i}}</span></li>&l
浏览 0提问于2017-02-11得票数 0
5回答
如何从api中获取数据并在angular 9中一次显示一项(即每秒一项)？
angular、rxjs
我有一个angular服务，它返回从服务器获取的项目数组。 // get-item.service.ts file
getItem()
// this getItem() is a method inside my service.
// this method returns an array of JSON Objects // component.ts file
items = []
constructor(private getItemsService: getItemsService)
ngOnInit() {
this.getItemsService.getItem().
浏览 25提问于2020-03-24得票数 0
2回答
为什么不能用var代替让它进入ngFor
javascript、angular、var、let
据我所知，javascript中的变量声明使用var和let，唯一的区别是var的作用域为当前函数，而let的作用域为当前块。所以，如果我在任何地方都使用var而不是let，它应该能工作。但在下面的代码中..。
<li *ngFor="let fruit of fruits">
{{ fruit}}
</li>
...if，我使用var，它给出了一个错误。
<li *ngFor="var fruit of fruits">
{{ fruit}}
</li>
错误: Uncaught (承诺)：错误:模
浏览 7提问于2017-07-31得票数 10
2回答
Angular 9:使用组件作为指令
angular、angular9、angular10
最近我正在阅读一个angular ui框架的源代码，我对以下代码有疑问： @Component({
selector: '[nbMenuItem]',
templateUrl: './menu-item.component.html',
animations: [
...
],
})
export class NbMenuItemComponent implements DoCheck, AfterViewInit, OnDestroy {
@Input() menuItem = <NbMenuItem>null;
浏览 33提问于2020-07-09得票数 1
回答已采纳
1回答
angular2帮助和澄清
angular
我正在阅读格雷格·林( Greg )的“Angular2 with TypeScript”一书。
我一直读到第四章，直到现在我一直做得很好，但是我似乎只是有点迷茫了。在app.module中，我有以下声明
AppComponent,
ProductsComponents,
RatingComponent,
ProductComponent
在app.components里我有
import { Component } from '@angular/core';
@Component({
selector: 'app-root'
浏览 4提问于2017-07-04得票数 0
回答已采纳
2回答
渲染集合的marionette复合视图
marionette
我有一个名为IndexView()的marionette复合视图。它被绑定到一个名为index.html的handlebars模板。
我将这样做，但我想问我的问题，以了解我的理解。
我从url "/api/users“获取一个集合
然后得到一个这样的列表
[{"name": "John Doe", "age": 30 }, {"name":"Jane Doe", "age": 31}]
在我的用户控制器中，我有以下代码
var usersCollection = new UsersColle
浏览 0提问于2014-07-27得票数 1
1回答
如何使用ngFor输出指令？
angular
我在一个包含其他指令的列表中有一些项目，我想输出指令并让它呈现。*ngFor正在将值正确地呈现给浏览器，但没有呈现指令。这个是可能的吗？如果我将该指令直接添加到该模板中，它将呈现该指令，因此我知道该页面知道该指令。
<ul id="sidebar-wrapper" class="clearfix nav navbar-default sidebar-nav clearfix">
<li *ngFor="#nav of navigationItems">
浏览 2提问于2016-01-21得票数 0
1回答
如果在特征模块中使用JW角分页，则无法工作
node.js、angular、pagination、angular-module、angular-pagination
我使用的是角10，如果将JW角分页模块导入app.module.ts，然后在使用app.component.ts组件的视图中使用它，则JW角分页模块工作得很好。但是，当我尝试将其导入自定义功能模块并使用导入该功能模块的组件时，分页元素不会显示在视图模板中。看来角无法看到分页模块。
App.module.ts
import { NgModule, Component, OnInit } from '@angular/core';
import { CoreModule } from "./core/core.module"
import { MessageModu
浏览 2提问于2020-10-28得票数 0
2回答
具有延迟的阵列对象的角NgFor环
javascript、angular、angular5、angular6
我正在做的UI与云水平移动在屏幕上。
我有一个要显示在云上的项目数组，数组中的每个项目都是云。该组件具有css显示的绝对位置，因此我目前的方法是在彼此之上创建一个组件堆栈。我的目标不是一次加载数组的项，而是用4000 My的延迟加载每个数组。我知道我们可能需要setTimeout()或setInterval()在clouds.component.ts或html模板*ngFor中。
我试过*ngFor="let setTimeout(() => item, 4000) of items"，但似乎不对。
下面的是组件的结构
cloud.component.ts
export
浏览 1提问于2018-08-09得票数 1
回答已采纳
4回答
请描述您的问题
标题：名词解析 - 短信 - 产品文档 - 帮助与文档 - 腾讯云
地址：https://cloud.tencent.com/document/product/382/13299#.E7.9F.AD.E4.BF.A1.E6.A8.A1.E6.9D.BF
浏览 701提问于2018-02-08
2回答
后端服务中数组的Angular2更新视图
javascript、angular
我有一个ListComponent和EntryComponent，用于在列表中附加一个项目。当通过DataService将项推入列表时，列表不会在ListComponent中更新。对于angular2的工作方式有什么想法吗？
名单处：
import {Injectable} from "angular2/core";
@Injectable()
export class DataService{
public items:Array<any> = [];
addItem(item:string):void{
this.item
浏览 2提问于2016-02-09得票数 0
1回答
从HTML中删除带有属性的角2组件的选择器标记
angular、typescript、recursion、treeview
我的树视图有角2分量选择器：
<navigation-bar [directories]="directories"></navigation-bar>
清单如下：
<ul>
<li class="nav-item ">
<a href="javascript:;" class="nav-link nav-toggle">
<i class="fa fa-clock-o">&
浏览 1提问于2017-07-29得票数 0
1回答
将列表元素追加到具有特定id的行中
javascript、html、angular
我有一个具有特定ids的行列表：
<li *ngFor="let app of Apps; let i = index>
<div id ="{{app[i]}}" class="row">{{app[i]}}</div>
以及按钮形式的消息列表：
<li *ngFor="let msg of messages; let i = index" id="message-{{ i }}" >
<button type="button" id =
浏览 3提问于2021-02-17得票数 0
3回答
Angular2:呈现/重新加载组件的模板
angular、typescript、angular2-template
理想情况下，我需要重新加载/重新复制组件的模板，但是如果有更好的方法来实现它，我会很高兴地实现它。
期望行为：
所以，我有一个菜单元素的组件。当(在另一个组件中)单击IBO (按下说，单击某种类型的'client‘)时，我需要在菜单中添加一个新选项，即IBO和一个子列表。
IBOsNavigationElement 组件(菜单组件)：
@Component({
selector: '[ibos-navigation-element]',
template: `
<a href="#"><i class=&
浏览 1提问于2017-04-13得票数 5
回答已采纳
3回答
在使用GET方法时，数据来自控制台，而不是HTML
html、angular、service
我已经在ngOnInIt()中编写了我的get方法。当我在控制台中打印数据时，它是可见的，但当使用插值在HTML语言中打印时，它返回[ object object]
{{filteredCourses}} ==>对象对象
当我在这里使用{{course.category|json}}时，我得到了数组"course“：”数据库“，”类别“：”数据库“，”长度“："2hr”的所有值。
html :-
<div class="courses" fxLayout="row wrap" fxLayoutAlign="center&#
浏览 46提问于2020-03-07得票数 0
1回答
角2-卷子
angular
我正在尝试制作一个可重用的选项卡组件，并对如何在组件中迭代多个ContentChildren (校正的)以将它们封装在html中感到困惑。
在我看来，我有一个组成部分
<demo-tabs>
<a routerLink="/some/link">Tab 1</a>
<a routerLink="/some/other/link">Tab 2</a>
<a routerLink="/some/third/link">Tab 3</a>
</demo
浏览 1提问于2017-10-10得票数 2
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
即时通信 IM
ICP备案
对象存储
实时音视频活动推荐
腾讯云开发者
