首页
学习
活动
专区
工具
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库,则不必为了使用库功能而对标记执行任何操作。...继续看看这是如何工作。 刷新浏览器。 你会看到一个简单没有样式表单。 表单样式 一般CSScontainer和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/)一看就明白,而且在线示例也写很棒。

    2.9K20

    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.mdMarkdown编辑器,支持NgModel双向绑定

    5.2K20

    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

    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

    在前端中理解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

    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

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

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

    1.1K10

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

    NG-ZORRO和ng-bootstrap 在项目中引入所需要具体组件 在html文件中绘制布局,在ts文件中编写逻辑 5.技术准备 TS语法 Angular基础知识 组件库文档NG-ZORRO和ng-bootstrap...6.总结 很简单开源项目,当时写这个主要是为了熟悉一下angular组件。...在职业生涯初期,自己一直在写AngularAngular.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...总结 这一篇没有涉及到路由这些和表单这些; 准备拆成两个文章来说; 路由配置及懒加载这些, 模板驱动表单及响应式表单[嵌套表单响应等],回车键触发搜索等。。

    10110
    领券