首页
学习
活动
专区
工具
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中。

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

相关搜索:找不到'string‘类型的不同支持对象。NgFor仅支持绑定到迭代对象,如数组NgFor仅支持绑定到迭代对象,如HTML中的数组找不到类型为' object‘的不同支持对象'[object Object]’。NgFor仅支持绑定到迭代对象,如angular中的数组找不到类型为' object‘的不同支持对象'[object Object]’。NgFor仅支持绑定到迭代对象,如Arrays ionic 2Ngfor的问题仅支持绑定到迭代对象,如数组Angular/Typescript找不到类型为' object‘的不同支持对象'[object Object]’。NgFor仅支持绑定到迭代对象,如数组Angular 9找不到类型为' object‘的不同支持对象'[object Object]’。NgFor仅支持绑定到迭代对象,如数组Angular4 NgFor仅支持绑定到迭代对象,如Arrays errorIonic3 :找不到类型为' object‘的不同支持对象'[object Object]’。NgFor仅支持绑定到迭代对象,如数组问题是ngfor仅支持绑定到迭代对象,如数组如何删除此错误NgFor仅支持绑定到数组等迭代对象找不到类型为' object‘的不同支持对象'[object Object]’。仅支持NgFor类型为'object‘的Angular 8错误'[object Object]’。NgFor仅支持绑定到迭代对象,如数组错误:'object‘类型的'[object Object]’。NgFor仅支持绑定到迭代对象,如数组。-离子项目Json数组找不到不同的支持对象铁路超高修复错误NgFor仅支持绑定到阵列Angular9等迭代对象Angular2:找不到与服务类不同的支持对象Angular4对象错误-找不到类型为' object‘的不同支持对象'[object ngFor ]’错误:找不到类型为' object‘的不同支持对象'[object Object]’错误错误:找不到不同的支持对象'[object Object]‘的类型' object’Angular
相关搜索:
页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

  • 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="let site of sites"> *ngFor 告诉 Angular...---- 服务(Services) Angular2中的服务是封装了某一特定功能,并且可以通过注入的方式供他人使用的独立模块。 服务分为很多种,包括:值、函数,以及应用所需的特性。...通过控制反转,对象在被创建的时候,由一个调控系统内所有对象的外界实体,将其所依赖的对象的引用传递给它。也可以说,依赖被注入到对象中。...这种控制反转,运行注入的特点即是依赖注入的精华所在。 Angular 能通过查看构造函数的参数类型,来得知组件需要哪些服务。

    2.2K20

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

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

    30K20

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

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

    8.7K20

    Angular的12个经典问题,看看你能答对几个?(文末附带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.4K80

    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.2K80

    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当成一个文件,去根目录下寻找,找不到的话则内部重定向到配置的

    3.1K20

    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.4K20

    AngularDart4.0 英雄之旅-教程-04明细 顶

    { final int id; String name; Hero(this.id, this.name); } 回到应用程序组件中,使用相对路径添加一个import 到新创建的文件:lib...-- each hero goes here --> 下一步你将添加英雄名字 使用ngFor指令罗列英雄 目标是将组件中的英雄列表绑定到模板,迭代它们,并单独显示它们。...ngFor指令遍历组件的英雄列表并为该列表中的每个英雄呈现该模板的一个实例。 表达式部分将hero标识为模板输入变量,其中包含每个迭代的英雄详情。...处理点击事件 添加点击事件绑定到:lib/app_component.html (click) ngFor="let hero of heroes" (click)="onSelect...当表达式为false时,Angular删除选定的类。 ===运算符测试给定的对象是否相同。 在模板语法指南中阅读有关[class]绑定的更多信息。

    3K30

    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.5K10
    领券