首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

Angular2找不到“string”类型的不同支持对象。NgFor仅支持绑定到迭代对象,如数组

Angular2是一个流行的前端开发框架,用于构建单页应用程序。在Angular2中,NgFor是一个内置的指令,用于循环遍历数组或其他可迭代对象,并为每个元素生成相应的HTML代码。

根据你的问题描述,你遇到了一个错误,即Angular2找不到“string”类型的不同支持对象。这是因为NgFor指令只能绑定到迭代对象,如数组,而不能直接绑定到字符串类型的数据。

要解决这个问题,你可以将字符串数据包装在一个数组中,然后将该数组传递给NgFor指令进行循环遍历。例如:

代码语言:txt
复制
// 在组件中定义一个包含字符串的数组
strings: string[] = ["string1", "string2", "string3"];

// 在模板中使用NgFor指令循环遍历数组
<div *ngFor="let str of strings">{{ str }}</div>

这样就可以正确地使用NgFor指令来循环遍历字符串数组,并将每个字符串渲染到HTML中。

关于腾讯云相关产品和产品介绍链接地址,由于要求不能提及具体的云计算品牌商,我无法给出具体的链接地址。但是腾讯云作为一家知名的云计算提供商,提供了丰富的云计算产品和服务,包括云服务器、云数据库、云存储等。你可以访问腾讯云官方网站,了解更多关于腾讯云的产品和服务信息。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

Angular 2 + 折腾记 :(2)初步认识angular2,不一样开发模式

, |是管道,支持多个管道,支持内置管道和自定义管道,:跟随是管道参数,后续文档我写一个如何自定义管道文章 []="":绑定组件内值[单向,数据流向视图],指令,原生html控件自身属性[value...,src,class,style]等,双引号内支持条件表达式[不完全等同于js条件表达式]或者方法亦或者变量, (click)="": 事件绑定[视图触发改变数据源],同上,支持表达式和方法。。...绑定赋值条件表达式特殊之处: 不支持: 赋值 (=, +=, -=, ...) new运算符 使用;或,链式表达式 自增或自减操作符 (++和--) 不支持位运算|和& 支持: 逻辑运算(...b : 会判断item是否有a这个值,防止undefined或者null让视图渲染报错 ---- 最最最常用内置指令 样式绑定(ngClass) [ngClass]或者[ngStyle]:可以传递一个对象...= index": 可以用这个来遍历数组对象,let index = index意思是创建一个局部遍历把当前遍历索引保存到你自定义变量index 动态渲染(*ngIf) *ngIf="item"

6.2K20

Angular 2 架构(下)

每种形式都有一个方向——从 DOM 来、 DOM 去、双向,就像图中箭头所示意。 插值 : 在 HTML 标签中显示组件值。... *ngFor 告诉 Angular...---- 服务(Services) Angular2服务是封装了某一特定功能,并且可以通过注入方式供他人使用独立模块。 服务分为很多种,包括:值、函数,以及应用所需特性。...通过控制反转,对象在被创建时候,由一个调控系统内所有对象外界实体,将其所依赖对象引用传递给它。也可以说,依赖被注入对象中。...这种控制反转,运行注入特点即是依赖注入精华所在。 Angular 能通过查看构造函数参数类型,来得知组件需要哪些服务。

2.2K20

AngularDart4.0 指南- 模板语法二 顶

要监听值更改,代码会绑定输入框输入事件。 当用户进行更改时,将引发输入事件,绑定在包含DOM事件对象$event上下文中执行语句。...分配给* ngFor文本是指导迭代器进程指令。 *ngFor微语法 分配给* ngFor字符串不是模板表达式。 这是一种微语法 - Angular解释一种小语言。...这是NgSwitchCase弃用名称。 ? NgSwitch是控制器指令。将其绑定返回switch值表达式。本例中emotion值是一个字符串,但是switch值可以是任何类型。...模板引用变量警告说明 模板引用变量(#phone)与模板输入变量(let phone)不同您在*ngFor中可能看到那样。 了解“结构指令”指南中差异。 引用变量范围是整个模板。...别名输入/输出属性 有时输入/输出属性公共名称应与内部名称不同。 属性指令通常是这种情况。指令消费者希望绑定指令名称。

29.9K20

Angular2 VS Angular4 深度对比:特性、性能

依赖注入在模块化开发和元素隔离方面非常有帮助,但它实现一直受到Angular 1.x困扰。Angular2解决了这个问题,另外还添加了一些缺少功能,子注入以及生命周期/范围控制。...注解: AtScript提供了连接元数据和功能工具。通过在DI库中提供基本信息(可以调用函数或创建类实例来检查相关元数据),从而简化了对象实例构建。...子注入: 子注入继承了其父级注入所有的专业服务,以及在子层次重写能力。根据需要,在一定范围内,一些类型对象可以被调用和机械重写。...激活:它会响应导航新控件成功事件。 canDeactivate:它将防止或允许跳出旧控制器导航。 停用:它会响应跳出旧控制器成功事件。...改进 *ngIf 和 *ngFor: 模板绑定语法目前支持一些少量有帮助更改。现在,开发人员已经可以使用if/else设计​​语法,并分配局部变量了。

8.7K20

Angular12个经典问题,看看你能答对几个?(文末附带Angular测试)

ngOnChanges:当Angular设置其接收当前和上一个对象数据绑定属性时响应。 ngOnInit:在第一个ngOnChange触发器之后,初始化组件/指令。...组件特定hooks: ngAfterContentInit:组件内容已初始化完成 ngAfterContentChecked:在Angular检查投影其视图中绑定外部内容之后。...Observable提供像map,forEach,reduce之类类似于数组运算符,还有强大运算符,retry()或replay()等,使用起来是相当方便。...提议功能 使用反应式扩展(RxJS) 根据时间变化,数组成员可以异步获取 目前Angular 2正式版已经发布,部分产品也已经对Angular 2正式版进行了支持。...其中,反应最为迅速就是Wijmo,Wijmo 在 Angular2 发布几个小时后就发布了支持 Angular2 正式版本 Wijmo。

17.3K80

Vuejs和其他前端框架对比

DOM会比上面的例子更复杂,但它本质上是一个嵌套着数组原生对象。...(,在desktop和mobile有不同功能,可以通过注入不同service实现,而共用相同template和directive)。Vue则需要程序员自己规划代码组织,用来支持共享组件。...比如 list differ 算法中 Angular2 可以支持实现了Symbol.iterator对象,而Vue只能支持Array。...它最低能支持 IE6,而 Vue 最低只能支持 IE9。 随着时间推移,Knockout 发展已有所放缓,并且略显有点老旧了。...相比而言,Vue 在支持 IE9 情况下并不需要依赖 polyfills 来工作。 在 Polymer 1.0 版本中,为了弥补性能,团队非常有限使用数据绑定系统。

3.8K110

vue.js与其他前端框架对比

DOM会比上面的例子更复杂,但它本质上是一个嵌套着数组原生对象。...(,在desktop和mobile有不同功能,可以通过注入不同service实现,而共用相同template和directive)。Vue则需要程序员自己规划代码组织,用来支持共享组件。...比如 list differ 算法中 Angular2 可以支持实现了Symbol.iterator对象,而Vue只能支持Array。...它最低能支持 IE6,而 Vue 最低只能支持 IE9。 随着时间推移,Knockout 发展已有所放缓,并且略显有点老旧了。...相比而言,Vue 在支持 IE9 情况下并不需要依赖 polyfills 来工作。 在 Polymer 1.0 版本中,为了弥补性能,团队非常有限使用数据绑定系统。

4.1K80

Angular2:从AngularJS 1.x 中学到经验

Scope AngularJS 中数据绑定机制是利用scope 对象来实现。我们首先在scope 对象上添加各种属性,然后在模板中显式声明需要绑定这些属性(单向绑定或者双向绑定都可以)。...虽然JavaScript 鸭子类型(指js 对象动态特性——译者注)让这门语言非常灵活,但是同时也让IDE 和文本编辑器很难对代码进行分析和支持。...如上图所述,TypeScript是ECMAScript 超集,它引入了显式类型注解和编译器。TypeScript 代码会被编译成当前浏览器所支持普通JavaScript。...文本编辑器和IDE 可以为改进型新模板提供更高级工具支持。在《迈向Angular2》第4 章Angular 2 中组件和指令中,我们会讨论Angular 2 中模板。...《迈向Angular2》第4 章,会学习脏值检测机制以及它们配置方法。

2.7K10

Angular2学习记录-给后端程序员经验分享

1.前言 前几天刚下定决心把毕业设计改造下,因为毕业设计算是我学习基石,学习东西都尽可能在这个平台上施展,锻炼自己.改造为前后端分离,前端使用angular2,后端只提供接口.便于以后维护.那么就要学习...使用TypeScript作为开发语言,对于Java和C#程序员可以快速上手,还有就是我比较喜欢强类型语言,每个变量各司其职,由其类型来限定,开发人员也很明确知道变量作用. google和Microsoft...支持 WebStorm对angular2强大支持....会被转换为1111%40qq.com,导致服务端解析失败,找了很多原因才发现是URLSearchParams这个对象用错了,angular2提供了这个对象,es6里面也有一个该对象,换成ng2中对象即可...index.html index.htm; } 解决方法: 解决方法就是让其对于路由都去加载index.html这个文件.使用try_files指令,该指令会把uri当成一个文件,去根目录下寻找,找不到的话则内部重定向配置

3K20

AngularDart4.0 指南- 显示数据 顶

您可以通过将HTML模板中控件绑定Angular组件属性来显示数据。 在这个页面中,您将创建一个包含英雄列表组件。 您将显示英雄名单列表,并有条件地在列表下方显示一条消息。...在任一种样式中,模板数据绑定都具有对组件属性相同访问权限。 用* ngFor显示一个列表属性 要显示英雄列表,首先向组件添加英雄名字列表,并将myHero重新定义为列表中第一个名字。...Angular使用该变量作为双曲花括号内插上下文。 在这种情况下,ngFor正在显示一个列表,但ngFor可以为任何Iterable对象重复项目。...在实际应用中,大多数绑定是针对更专业化对象。 要将此绑定转换为使用专用对象,请将英雄名称列表转换为Hero对象列表。 为此,你需要一个Hero类。...使用Hero类 导入Hero类后,AppComponent.heroes属性可以返回一个Hero对象类型列表:lib/app_component.dart (heroes) List heroes

5.3K10

Angular 6.x 快速入门

>Hello {{ name }}`, }) export class AppComponent { name = 'Angular'; } 绑定对象属性 import { Component...name = 'Angular'; } 定义数据接口 在 TypeScript 中接口是一个非常灵活概念,除了可用于对类一部分行为进行抽象外,也可用于对「对象形状(Shape)」进行描述... ngFor 指令简介 该指令用于基于可迭代对象每一项创建相应模板。它与 AngularJS 1.x 中 ng-repeat 指令功能是等价。...@Injectable({ providedIn: 'root' }) export class MemberService {} (2) 在应用地方,导入已创建服务,: import {...router-outlet 指令 该指令用于告诉 Angular 在哪里加载组件,当 Angular 路由匹配到响应路径,并成功找到需要加载组件时,它将动态创建对应组件,并将其作为兄弟元素,插入

14.1K20

AngularDart 4.0 高级-管道 顶

换句话说,您可以通过绑定来控制格式,就像您通过绑定控制生日值一样。 编写第二个组件,将管道格式参数绑定组件format属性。...飞行英雄管道 将一个FlyingHeroesPipe添加到*ngFor迭代器,该迭代器将英雄列表过滤到只能飞行英雄。...纯净管道 当Angular检测到对输入值纯粹更改时才执行纯管道。 在AngularDart中,纯粹改变仅仅来自对象引用改变(假设所有东西都是Dart中对象)。...使用JsonPipe进行调试:JsonPipe提供了一种简单方法来诊断离奇失败数据绑定,或者检查未来绑定对象。 纯净管道和纯粹功能 纯管道使用纯功能。...该组件可以公开一个filteredHeroes或sortedHeroes属性,并控制执行支持逻辑时间和频率。 您可以在管道中放置并在应用程序中共享任何功能都可以写入过滤/排序服务并注入组件中。

6.3K20

AngularJS2.0 教程系列(一)

随着时间推移,各种特性 被加入进去以适应不同场景下应用开发。然而由于最初架构限制(比如绑定和模板机制),性能 提升已经非常困难了。...引入Angular2预定义类型 import {Component,View,bootstrap} from "angular2/angular2"; import是ES6关键字,用来从模块中引入类型定义...在这里,我们从angular2模块库中引入了三个类型: Component类、View类和bootstrap函数。 2....@Component最重要作用是通过selector属性(值为CSS选择符),指定这个组件渲染哪个DOM对象上。 @View最重要作用是通过template属性,指定渲染模板。 3....渲染组件DOM 将组件渲染DOM上,需要使用自举/bootstrap函数: bootstrap(EzApp); 这个函数作用就是通知Angular2框架将EzApp组件渲染DOM树上。

2.4K10

《C++Primer》第十章 泛型算法

排序和搜索 泛型:可以用于不同类型元素和多种容器类型,不仅包括vector和list等标准库类型,还包括内置数组类型 泛型算法永远都不会执行容器操作,它们只会运行于迭代器只上,执行迭代操作...callable object,到目前为止我们使用过两种可调用对象:函数和函数指针。...),一种解决思路是我们传递给find_iflambda使用捕获列表来保存sz: // words类型为vector, 返回第一个长度大于等于szstring元素, 找不到则返回words.end...,这个参数必须是一个指向给定容器迭代器,元素将被插入给定迭代器所表示元素之前 使用back_insert需要容器支持push_back,使用front_inserter需要容器支持push_front...// 3) in1和in2必须读取相同类型, 如果它们都是尾后迭代器或者绑定相同输入则两者相等 in1 == int2 in1 !

66510
领券