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

我的控件没有从Model类Angular 6 TS获取值

问题:我的控件没有从Model类Angular 6 TS获取值。

回答: 在Angular 6 TS中,要确保控件能够从Model类获取值,需要遵循以下步骤:

  1. 确保在HTML模板中,你的控件与Model类的属性正确绑定。例如,如果你的Model类有一个名为name的属性,你可以使用双向绑定语法将其绑定到输入框控件:
代码语言:txt
复制
<input [(ngModel)]="name" type="text">
  1. 确保在组件类中,你正确地声明和初始化Model类的属性。在组件的OnInit生命周期钩子函数中,你可以初始化Model类的属性值。例如,创建一个名为name的属性:
代码语言:txt
复制
import { Component, OnInit } from '@angular/core';

@Component({
  // 组件装饰器配置
})
export class MyComponent implements OnInit {
  name: string;

  constructor() { }

  ngOnInit() {
    this.name = 'Initial value';
  }
}
  1. 确保你导入了必要的模块和依赖项。在Angular中使用双向绑定语法需要导入FormsModule模块。确保在你的组件模块中导入并将其添加到imports数组中:
代码语言:txt
复制
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';

@NgModule({
  imports: [
    // 其他模块导入
    FormsModule
  ],
  declarations: [
    // 组件声明
  ]
})
export class MyModule { }

通过以上步骤,你的控件应该能够从Model类中获取到正确的值。如果仍然无法获取值,请检查以下可能的原因:

  • 确保你的Model类属性的访问修饰符是public
  • 确保你的HTML模板文件与组件类正确关联,即在组件类上使用@Component装饰器,并在其中指定正确的templateUrltemplate属性值。
  • 确保你没有在组件或HTML模板中重复声明相同的变量名。

如果以上步骤仍无法解决问题,请提供更多的代码和错误信息,以便更准确地定位问题所在。

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

相关·内容

AngularDart4.0 指南- 表单 顶

请注意提交按钮被禁用,并且输入控件从绿色变为红色。 您将以小步骤构建此表单: 创建英雄模型类。 创建控制表单的组件。 用初始表单布局创建一个模板。...创建一个基本的表单 一个Angular表单有两个部分:一个基于HTML的模板和一个组件类,以编程方式处理数据和用户交互。 从课程开始,因为它简要地说明了英雄编辑可以做什么。...你还没有使用Angular。 没有绑定或额外的指令,只是布局。 在模板驱动的表单中,如果已经导入了angular_forms库,则不必为了使用库功能而对标记执行任何操作。...继续看看这是如何工作的。 刷新浏览器。 你会看到一个简单的,没有样式的表单。 表单的样式 一般的CSS类container和btn来自Bootstrap。...靠近表单顶部的诊断确认所有的更改都反映在model中。 从模板中删除诊断绑定,因为它已经达到了目的。 根据控制状态给出视觉反馈 使用CSS和类绑定,您可以更改表单控件的外观以反映其状态。

17.5K30
  • 如何使用WijmoJS 纯前端设计器,快速生成 Angular 应用

    如果您已经下载了WijmoJS,则可以在Samples \ TS \ Angular2 \ HeaderFilters \ HeaderFilters文件夹中找到此项目。...例如,如果将allowResizing属性的值从Columns更改为None,则网格渲染中没有视觉差异,因为这是运行时行为设置。...使用Themes命令可以查看选择不同WijmoJS 主题的效果,尽管这对生成的代码没有影响,该代码仅由控件标记组成。 让我们用趋势线创建一个图表控件。...随着趋势线添加到图表中,设计界面现在看起来像这样: 在独立模式下,没有要更新的源文件,但您仍然可以生成Angular标记并将它们从设计器复制到HTML源。...葡萄城的控件和软件产品在国内外屡获殊荣,在全球被数十万家企业、学校和政府机构广泛应用。

    5.4K40

    走进AngularJs(二) ng模板中常用指令的使用方式

    通过使用模板,我们可以把model和controller中的数据组装起来呈现给浏览器,还可以通过数据绑定,实时更新视图,让我们的页面变成动态的。ng的模板真是让我爱不释手。...过滤器通常是伴随标记来使用的,将你model中的数据格式化为需要的格式。表单的控制功能主要涉及到数据验证以及表单控件的增强。   在这里有必要说明一下表达式的概念,毕竟我们模板中大部分使用的都是变量。...框架会用display:block和display:none来控制元素的显隐。 三、表单控件功能相关的   对于常用的表单控件功能,ng也做了封装,方便灵活控制。   ...注意: 上面的这些只是单向绑定,即只是从数据到模板,不能反作用于数据。要双向绑定,还是要使用 ng-model 。...~在写这篇文章之前我就在纠结,写这样的内容是不是有点多余,因为这些东西在angular官网(http://docs.angularjs.org/api/)一看就明白,而且在线示例也写的很棒。

    3K20

    Angular6自定义表单控件方式集成Editormd

    ControlValueAccessor要处理的就是实现 Model -> View,View -> Model 之间的数据绑定,其具体的作用是: 把 form 模型中值映射到视图中 当视图发生变化时,...:用来获取原生表单控件的值更新时通知Angular表单控件更新的函数(即,设置当控件接收到 change 事件后,调用的函数) registerOnTouched:用来获取通知用户正在交互的函数(即,设置当控件接收到...(isDisabled: boolean):设置DISABLED状态时做的执行的方法。即,当控件状态变成 DISABLED 或从 DISABLED 状态变化成 ENABLE 状态时,会调用该函数。...- 用于 select 选择控件 - CheckboxControlValueAccessor - 用于 checkbox 复选控件 至于原生表单控件和Angular表单控件能够保持一致的原理,可以看下...4.x 自定义表单控件 【荐】深入Angular自定义表单控件 Angular集成Editor.md的Markdown编辑器,支持NgModel双向绑定

    5.2K20

    angularjs中常用的ng指令介绍【转载】

    过滤器通常是伴随标记来使用的,将你model中的数据格式化为需要的格式。表单的控制功能主要涉及到数据验证以及表单控件的增强。 在这里有必要说明一下表达式的概念,毕竟我们模板中大部分使用的都是变量。...}}} 如果你想拼接一个类名出来,可以使用插值表达式,如: 字体样式测试 然后在controller中指定style的值: 注意我用了class...框架会用display:block和display:none来控制元素的显隐。 三、表单控件功能相关的 对于常用的表单控件功能,ng也做了封装,方便灵活控制。...注意:  上面的这些只是单向绑定,即只是从数据到模板,不能反作用于数据。要双向绑定,还是要使用  ng-model  。...DOM; 2) 浏览器加载angular.js文件; 3) angular监听 DOMContentLoaded  事件,监听到时开始启动; 4) angular寻找ng-app指令,确定作用范围; 5

    1.9K30

    Angular 2 表单(下)

    每一个 input 元素都有一个 name 属性, Angular 的表单模块需要使用它为表单注册控制器。 运行以上实例输出结果如下: {{diagnostic}} 只是用于测试时候输出数据使用。...我们还可以通过 ngModel 跟踪修改状态与有效性验证,它使用了三个 CSS 类来更新控件,以便反映当前状态。...状态 为 true 时的类 为 false 时的类 控件已经被访问过 ng-touched ng-untouched 控件值已经变化 ng-dirty ng-pristine 控件值是有效的 ng-valid...hidden 属性绑定到 name 控件的属性,我们就可以控制"name"字段错误信息的可见性了。...通过 ngSubmit 来提交表单 我们可以使用 Angular 的指令 NgSubmit 来提交表单, 并且通过事件绑定机制把它绑定到 SiteFormComponent.submit() 方法上。

    1.7K10

    在前端中理解MVC服务之 Angular篇(完结)

    最后,我们的文件架构由以下JavaScript文件组成: user.model.ts —用户的属性(模型) user.service.ts —管理用户的所有操作 users.component.ts 负责加入...Models (贫血模式) 此示例中的第一个生成类是应用程序模型,user.model.ts由类属性和生成随机 D 的私有方法(这些代码可能来自服务器中的数据库)。...从后端到前端的数据也是如此:它们没有实例化其Class....|| []; this.users = users.map(user => new User(user)); } 我们定义了一个名为"类变量"的类变量,该变量在所有用户从纯对象转换为Class的原型对象后存储它们...我建议你从第一篇与JavaScript相关的帖子开始,了解所使用的体系结构。下一步是通过应用 TypeScript(在第二篇文章中)来强化代码,最后查看此文章中的代码已适应框架。

    4.1K20

    用Typescript 的方式封装Vue3的表单绑定,支持防抖等功能。

    key 的默认值 尝试了各种方式,虽然可以运行,但是TS会报错。可能是我打开的方式不对吧。 customRef 为啥没有用 computed?因为后续要增加防抖功能。...因为子组件的值对应的是内部变量 _value,并没有直接对应props的属性值。 这样就实现了防抖的功能。 直接传递 model 的方法。...基础封装方式 ref-model.ts import { computed } from 'vue' /** * 控件的直接输入,不需要防抖。负责父子组件交互表单值。...我比较喜欢直接传入 model 对象,非常简洁。 范围取值(多字段)的封装方式 开始日期、结束日期,可以分为两个控件,也可以用一个控件,如果使用一个控件的话,就涉及到类型转换,字段对应的问题。...而我们封装的 rangeRef 就可以做这样的转换。 TS 的尴尬 可能你会注意到,上面的例子没有使用 colName 属性,而是直接传递字符层的参数。

    1.1K10

    Angular4记账webApp练手项目之五(Angular4项目中创建service(服务)和使用http模块)

    前台源码 后台源码 说明:后台代码是用asp.net编写的,和http://www.jianshu.com/p/e6ed43227840这篇文章很像。其中还包含了其他一些练手的东西。...现在使用http模块与后端通信,变可以让我们的应用活起来。 我把后台服务写成了可跨域请求的webapi,这样在node上面调试起来就方便多了。...这里写图片描述 整理下我们的后台接口 添加一个Model文件夹,在下面添加一个model.url.ts文件来存储我们的接口信息 const host = 'http://127.0.0.1:8001';...这里写图片描述 这里我们用到了自定义类型Result的作用呢,看控制台打印的数据,对数据没什么影响,但是对我写代码是有帮助的。看下面: ?...这里写图片描述 对,会提示,如果使用了类型里没有的字段,还会报错。这活生生把一个弱类型语言变成了强类型的。当然如果不喜欢,我们可以不用自定义类。把自定义的Result换成any即可。 ?

    1.3K10

    开源项目——5种技术编写的7个demo工程

    NG-ZORRO和ng-bootstrap 在项目中引入所需要的具体组件 在html文件中绘制布局,在ts文件中编写逻辑 5.技术准备 TS语法 Angular基础知识 组件库文档NG-ZORRO和ng-bootstrap...6.总结 很简单的开源项目,当时写这个主要是为了熟悉一下angular组件。...在职业生涯的初期,自己一直在写Angular,从Angular.js到Angular7,8,11,由于对前端没有一点的兴趣,唉,工作之外的时间都去学java写后台了,一直也没有深入了解angular,就是...,android,iOS,除却FLutter有一些积累外,其他的技术都是勉强应付工作,环境和个人认知导致的吧,自己这只有广度没有深度的技术栈,从资本主义的角度来看,专精一门的工人生产力更高,也就是所谓的大厂螺丝钉...5.技术准备 Swift基础语法 UIKit使用 6.总结 找的不少教程都不写纯代码,都是storyboard拖拽控件结合代码,不太喜欢这种方式.

    1.1K00

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

    ---- 基础概念 国内的官网--基础 词汇表(又名计算机术语--angular2 & es6 & es7) 速查表:又名demo写法表,里面涵盖了很多写法,相当于一本小字典 关于ng2的一堆为什么:... 复制代码 main.ts // 引入生产模式,控制关闭开发模式的,函数来的 import { enableProdMode } from '@angular...,ng2的开发模式就是类似一个树,从根节点无限发散 import { NgModule } from '@angular/core'; // 表单模块,比如你要在组件内用到一些表单元素或者数据绑定..., |是管道,支持多个管道,支持内置管道和自定义管道,:跟随是管道的参数,后续文档我写一个如何自定义管道的文章 []="":绑定组件内的值[单向,数据流向视图],指令,原生html控件的自身属性[value...---- 总结 这一篇没有涉及到路由这些和表单这些; 准备拆成两个文章来说; 路由的配置及懒加载这些, 模板驱动的表单及响应式表单[嵌套表单响应等],回车键触发搜索等。。

    6.2K20

    在前端中理解MVC服务之TypeScript篇

    最后,我们的文件体系结构由以下 TypeScript 文件组成: user.model.ts — 用户的属性(模型) user.controller.ts — 负责将模型加入视图的部分 user.service.ts...使用TS构建Class.但,构造函数接受个纯对象,该对象将通过Window从用户数据输入中提供,此对象需要有一个Interface接口,以便任何纯对象都不能实例化,而是满足定义的接口的对象。...应该注意的是,服务使用模型,实例化从类提取的对象。这是因为只存储数据,而不是存储数据的原型。从后端到前端的数据也是如此 , 它们没有实例化其类。...[]; this.users = users.map(user => new User(user)); } 提示: 我们定义了一个名为“类变量”的Class变量,该变量在所有用户从纯对象转换为类的原型对象后存储它们...我已经可以告诉你,callbackbindUserListChanged是从视图产生的功能,并负责刷新屏幕上的用户列表。

    2K20

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

    基础概念 官方中文社区一把梭: 你想要的都概念基本可以在这里找到。 angular-cli 启动 src是开发目录,生产打包后会产生一个dist目录; 初步说下你从启动到浏览器看到app works!... main.ts // 引入生产模式,控制关闭开发模式的,函数来的 import { enableProdMode } from '@angular...,ng2的开发模式就是类似一个树,从根节点无限发散 import { NgModule } from '@angular/core'; // 表单模块,比如你要在组件内用到一些表单元素或者数据绑定..., |是管道,支持多个管道,支持内置管道和自定义管道,:跟随是管道的参数,后续文档我写一个如何自定义管道的文章 []="":绑定组件内的值[单向,数据流向视图],指令,原生html控件的自身属性[value...总结 这一篇没有涉及到路由这些和表单这些; 准备拆成两个文章来说; 路由的配置及懒加载这些, 模板驱动的表单及响应式表单[嵌套表单响应等],回车键触发搜索等。。

    10810
    领券