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

在Angular中类型为“string”的ngFor上不存在属性“name”

在Angular中,ngFor是一个内置的指令,用于循环遍历一个集合并创建相应的HTML元素。根据提供的问题描述,我们可以得出以下答案:

问题描述:在Angular中类型为“string”的ngFor上不存在属性“name”。

解答:在Angular中,ngFor指令用于循环遍历一个集合,并为每个元素创建相应的HTML元素。然而,ngFor指令只能应用于数组或可迭代对象,而不能直接应用于字符串类型。因此,如果尝试在类型为"string"的ngFor上使用"name"属性,将会出现错误。

解决该问题的方法是确保ngFor指令应用于一个数组或可迭代对象。如果想要循环遍历字符串中的每个字符,可以将字符串转换为字符数组,然后使用ngFor指令。

示例代码:

代码语言:txt
复制
<div *ngFor="let char of 'exampleString'">{{ char }}</div>

在上述示例中,我们将字符串"exampleString"转换为字符数组,并使用ngFor指令循环遍历每个字符,并将其显示在一个div元素中。

腾讯云相关产品和产品介绍链接地址:

  • 腾讯云云服务器(CVM):提供弹性计算能力,满足各种业务需求。产品介绍链接
  • 腾讯云对象存储(COS):提供安全、稳定、低成本的云端存储服务。产品介绍链接
  • 腾讯云人工智能(AI):提供丰富的人工智能服务,包括图像识别、语音识别、自然语言处理等。产品介绍链接
  • 腾讯云物联网(IoT):提供全面的物联网解决方案,帮助连接和管理物联网设备。产品介绍链接

请注意,以上链接仅为示例,实际使用时应根据具体需求选择适合的产品。

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

相关·内容

Angular快速学习笔记(3) -- 组件与模板

显示数据 Angular 中最典型数据显示方式,就是把 HTML 模板控件绑定到 Angular 组件属性。...angular提供两种地方存放组件模板 你可以使用 template 属性把它定义内联, 或者把模板定义一个独立 HTML 文件, 再通过 @Component 装饰器 templateUrl... ` 模板里可以自己使用.语法,访问对象属性 使用 ngFor 显示数组属性 *ngForAngular “迭代”指令。... 多数情况下,插值表达式是更方便备选项。 实际渲染视图之前,Angular 把这些插值表达式翻译成相应属性绑定。...name}} 当绑定 title 属性空,仍然会继续渲染 非空断言操作符(!) TypeScript 2.0 ,你可以使用 --strictNullChecks 标志强制开启严格空值检查。

15.3K30

AngularDart4.0 指南- 显示数据 顶

您可以通过将HTML模板控件绑定到Angular组件属性来显示数据。 在这个页面,您将创建一个包含英雄列表组件。 您将显示英雄名单列表,并有条件地列表下方显示一条消息。...在任一种样式,模板数据绑定都具有对组件属性相同访问权限。 用* ngFor显示一个列表属性 要显示英雄列表,首先向组件添加英雄名字列表,并将myHero重新定义列表第一个名字。...“模板语法”页面的microsyntax部分阅读有关模板输入变量更多信息。 Angular列表每个项目复制,将hero变量设置当前迭代项目(英雄)。...现在英雄出现在一个无序列表。 ? 数据创建一个类 应用程序代码直接在组件内定义数据,这不是最佳实践。 但是,一个简单演示,没关系。 目前,绑定是一个字符串列表。...使用下面的代码名为lib文件夹创建一个hero.dart新文件:lib/src/hero.dart class Hero { final int id; String name; Hero

5.3K10
  • AngularDart 4.0 高级-结构指令 顶

    在此示例,星号(*)指令属性名称前面。 {{hero.name}} 没有方括号。 没有圆括号。 只要*ngIf设置一个字符串。...三种常见内置结构指令 - NgIf,NgFor和NgSwitch ... - 模板语法指南中进行了描述,并在整个Angular文档示例中进行了介绍。...您可以分配给ngFor字符串启用这些功能,这是您在Angularmicrosyntax编写。...Angular设置let-hero上下文$implicit属性值,NgFor已经用当前迭代hero初始化了它值。 API指南描述了额外NgFor指令属性和上下文属性。...满足Angular模板类似需求。 编写一个结构指令 本节,您将编写一个与NgIf相反UnlessDirective结构指令。 NgIf条件true时显示模板内容。

    16.1K20

    Angular 结构指令模式 - 它们是什么且怎么使用

    Angular ,有两种类型指令。属性指令修改 DOM 元素外观或者行为。结构指令添加或者移除 DOM 元素。 结构指令是 Angular 中最强大特性之一,然而它们却频繁被误解。... Angular ,有三种标准结构化指令。...当表达式是 false 时候,*ngIf 指令移除 HTML 元素。当 true 时候,元素副本会添加到 DOM 。...typescript : Myshopping: string = ''; 我们有一个 MyShopping 变量,它有一个默认值,用于模块渲染满足条件特定元素。...总结 结构指令是 Angular 很重要一部分,我们可以通过多种方式使用它们。 希望通过本文,读者能更好理解怎么去使用这些指令和什么时候去使用这些模式。 本文译文,采用意译形式。

    3.8K20

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

    如果名称未能匹配已知指令元素事件或输出属性,则Angular会报告“未知指令”错误。 $event和事件处理语句 事件绑定Angular目标事件设置了一个事件处理程序。...当表达式false时,NgIf从DOM删除HeroDetailComponent,销毁该组件及其所有子组件。 Dart模式下,Dart期望布尔值(类型booltrue或false。...Angular把这条指令翻译成一个围绕宿主元素,然后重复使用这个模板列表每个英雄创建一组新元素和绑定。 “结构指令”指南中了解微语法。...大多数情况下,Angular将引用变量值设置声明元素。...和@Output) 到目前为止,该页面主要集中绑定到模板表达式组件成员以及出现在绑定声明右侧语句

    30K20

    Angular 6.x 基础教程

    $event 自动映射触发事件,与我们 Provider Token 作用类似。除了监听鼠标事件外,我们还可以监听键盘事件。...指令 Angular 我们可以使用 ngFor 指令来显示数组每一项信息。...第七节 - 使用 Input 装饰器 为了让我们能够开发更灵活组件,Angular 我们提供了 Input 装饰器,用于定义组件输入属性。...第十节 - 组件样式 Angular ,我们可以设置组件元数据时通过 styles 或 styleUrls 属性,来设置组件内联样式和外联样式。...用过 AngularJS 1.x 同学,对 ng-class 应该很熟悉,通过它我们能够根据条件,元素动态添加或移除对应样式。 Angular ,对应指令是 ngClass 。

    15.6K20

    AngularDart4.0 指南- 表单 顶

    您将在表单添加一个select,并使用ngFor(先前“显示数据”页面中看到一种技术)将选项绑定到powers列表。...每个input元素都有一个ngControl指令,Angular表单需要用这个指令表单注册控件。 如果您现在运行应用程序并更改每个英雄model属性,表单可能会显示如下: ?...指令exportAs属性告诉Angular如何将引用变量链接到指令。 您将name设置“ngForm”,因为ngModel指令exportAs属性是“ngForm”。...如果没有Angular帮助,你需要做什么才能将按钮启用/禁用状态连接到表单有效性? 对你来说,这很简单: (增强)表单元素定义一个模板引用变量。 多处按钮引用该变量。...因为提交表单之前,提交属性false,因为HeroFormComponent片段显示:lib/src/hero_form_component.dart (submitted) bool submitted

    17.5K30

    Angular 快速学习笔记(1) -- 官方示例要点

    就会为 HeroService 创建一个单一、共享实例,并把它注入到任何想要它 c....声明了一个私有 heroService 属性, 2. 把它标记为一个 HeroService 注入点 ngOnInit 调用service获取数据 a....属性 export class MessageService { messages: string[] = []; } constructor(public messageService: MessageService...添加路由 ,路由定义 会告诉路由器,当用户点击某个链接或者浏览器地址栏输入某个 URL 时,要显示哪个视图,因此路由包含两个属性: i. path:一个用于匹配浏览器地址栏 URL 字符串...*ngFor 不能直接使用 Observable。 不过,它后面还有一个管道字符(|),后面紧跟着一个 async,它表示 Angular AsyncPipe。

    3.6K00

    Angular 快速学习笔记(1) -- 官方示例要点

    就会为 HeroService 创建一个单一、共享实例,并把它注入到任何想要它 c....声明了一个私有 heroService 属性, 2. 把它标记为一个 HeroService 注入点 ngOnInit 调用service获取数据 a....属性 export class MessageService { messages: string[] = []; } constructor(public messageService: MessageService...添加路由 ,路由定义 会告诉路由器,当用户点击某个链接或者浏览器地址栏输入某个 URL 时,要显示哪个视图,因此路由包含两个属性: i. path:一个用于匹配浏览器地址栏 URL 字符串...*ngFor 不能直接使用 Observable。 不过,它后面还有一个管道字符(|),后面紧跟着一个 async,它表示 Angular AsyncPipe。

    3.7K50

    Angular 从入坑到挖坑 - 组件食用指南

    ,可以通过 angular 内置模板语法与 html 元素进行结合,从而告诉 angular 如何根据我们应用逻辑和数据来渲染页面 4.1.2.1、插值表达式 插值表达式可以将组件属性值或者是模板数据通过模板表达式运算符进行计算...} ngOnInit(): void { } } NgFor 指令上下文中 index 属性每次迭代,会获取到条数据索引值 当渲染数据发生改变时 4,会导致 dom 元素重新渲染...安全导航运算符 视图中使用属性 null or undefined 时,javascript 和 angular 会引发空指针异常并中断视图渲染过程, 从而视图会渲染失败,而使用了安全导航运算符...非空断言运算符 tsconfig.json 启用 strictNullChecks 属性,typescript 将会强制开启严格空值检查,在这种模式下,所有定义了类型属性是不允许赋值 null...@Input 用来获取数据,@Output 用来向外发送数据 4.4.2、子组件获取父组件信息 父组件,添加对于子组件引用,并将需要传递数据 or 方法绑定到子组件 传递数据直接将父组件属性值赋值给绑定在子组件属性就可以了

    15.8K30

    AngularDart4.0 英雄之旅-教程-08HTTP 顶

    注册HTTP服务 应用程序可以使用BrowserClient之前,您必须将其注册服务提供者。 您应该可以从应用程序任何位置访问BrowserClient服务。...内存Web API服务,如下所示,使用http库MockClient类实现。 所有的http客户端实现共享一个共同客户端接口,所以你将有应用程序使用客户端类型,以便您可以自由切换实现。...正如所料,* ngFor从组件英雄属性重复英雄对象。 但正如你很快就会看到,英雄财产现在是一个英雄列表流,而不仅仅是一个英雄名单。...示例,基础字符串流(_searchTerms.stream)表示由用户输入英雄名称搜索模式。 每次调用search()都会通过调用控制器add()将新字符串放入流。...仪表板搜索框输入一些文字。 如果你输入字符匹配任何现有的英雄名字,你会看到这样东西。 ? 应用程序结构和代码 查看此页面的实例(查看源代码)示例源代码。 确认您具有以下结构: ?

    11K30

    Angular快速学习笔记(2) -- 架构

    selectedHero"> *ngFor 指令告诉 Angular 一个列表上进行迭代 {{hero.name}}、(click) 和 [hero]把程序数据绑定到及绑定回...(hero)"> {{hero.name}}插值表达式 标签显示组件 hero.name 属性值。... 双向绑定,数据属性值通过属性绑定从组件流到输入框。用户修改通过事件绑定流回组件,把属性值设置最新值。...模板,它们看起来就像普通 HTML 属性一样,因此得名“属性型指令”。...如何使用: Angular ,要把一个类定义服务,就要用 @Injectable 装饰器来提供元数据,以便让 Angular 可以把它作为依赖注入到组件 使用 @Injectable 装饰器来表明一个组件或其它类

    5.3K20
    领券