Angular2 模型渲染的一个坑

最新推荐文章于 2024-05-11 09:51:00 发布
最新推荐文章于 2024-05-11 09:51:00 发布
阅读量3.6k 收藏
点赞数 1
分类专栏： web前端 ---angularjs 文章标签： angular angularjs2 angular2
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Ligongxiang123/article/details/71106086
版权

今天在使用angular2开发一个CMS项目的时候发现了一个模型渲染的坑，特此记录。

相信很多人使用angular2的时候都有这么一种情况，首先定义一个单例service，作为数据的提供者，在组件中注入，service中只简单的返回一个数组对象。例如：
这里写图片描述

在组件中定义一个私有变量，等于例如图中的columns(图中是我更改以后的代码，原本就是定义了一个私有变量，等于了对象中的columns数组，然后在HTML中Ngfor循环显示)：
这里写图片描述

运行，一切正常，view中也能正确渲染，但是如果这时候你从另一个组件中使用一个新的数组直接替换了service中的columns数组，按理说view中应该是渲染出新的结果，但是结果是view没有任何变化。到底为什么是这样呢？按理说js的数组传递应该

最低0.47元/天 解锁文章
Orz___Li
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
angular 强制更新视图_angularjs：强制重新渲染/完全刷新指令模板
weixin_39883906的博客
12-30 670
This is a rewriting because of the off-topic issue:I wrote a directive for a dropdown. I am using the directive two times as kind of a workflow. the first dropdown triggers by change action the refres...
Angular的ChangeDetectorRef.detectChanges()实现angularJS的$apply()方法，强制刷新数据渲染
我驾驶汽车从不是为了从A点到达B点，我喜欢去感受汽车，与之交流，与之融为一体。
03-31 2909
在Javascript代码里，都是按照一定顺序来执行的，当轮到一个代码片段执行的时候，浏览器就只会去执行当前的片段，不会做任何其他的事情。所以有时候一些做得不是很好的网页，当点击了某个东西之后会卡住，Javascript的工作方式就是会导致这一现象原因之一！ 我们先回忆下曾经的AngularJS 什么时候用$apply() 还是那个问题，那我们到底什么时候需要去调用apply()方法呢？情况非常少，实际上几乎我们所有的代码都包在apply()方法呢？情况非常少，实际上几乎我们所有的代码都包在.
Angular4_强制重新渲染页面组件
热门推荐
Martin 的博客
05-24 1万+
constructor(private zone:NgZone) { // enable to for time travel this.appStore.subscribe((state) => { this.zone.run(() => { console.log('enabled time travel'); ...
推荐使用：Angular Universal - 前端渲染的革命性框架
最新发布
gitblog_00035的博客
05-11 361
推荐使用：Angular Universal - 前端渲染的革命性框架 项目地址:https://gitcode.com/angular/universal Angular Universal 是一个创新性的项目，旨在扩展 Angular（platform-server）的核心API，为开发者提供在各种场景下进行服务器端渲染的能力。随着项目的成熟和社区的发展，Angular Universal 已...
angular js 中异步加载
qq_33159000的博客
07-18 830
对于angular js中异步加载后台的时，要在访问主页面时让其执行异步加载的代码，如以下代码，异步加载后的数据要在子页面中使用，就要放在加载子页面之前执行该段代码             $http({ method: 'POST', url: 'getBusinessFields' //params : param }).success( function(response) {
Angular基础之ngFor遍历对象数组获取key和value渲染页面的几种方法
tangdou369098655的博客
05-10 4133
Angular的ngFor遍历对象数组获取key和value的几种方法 方法一 ts文件： export class MyDemo { objectKeys = Object.keys; myObj = { a: 'a', b: 'b' }; constructor(){} } html文件： <div *ngFor="let key of objectKeys(myObj)"> {{key}} : {{myObj[key]}} </div&
详解angular中如何监控dom渲染完毕
10-20
在AngularJS中，DOM（文档对象模型）渲染完毕的监控是一个关键点，特别是在与jQuery插件集成或需要在特定时间点执行JavaScript代码时。AngularJS作为一个强大的前端框架，提供了多种方式来处理DOM操作和事件监听，以...
Angular Renderer (渲染器)的具体使用
08-27
由于 Angular 主要是一个 UI 框架，平台提供的最重要的功能之一就是页面渲染。 在使用 Angular Renderer 时，我们需要先设置平台和引导应用程序。例如，使用 platformBrowserDynamic() 函数来创建平台，...
揭秘Angular2 中文扫描版 带书签
10-25
书中内容全面，从基础知识到高级架构，再到实际应用，为读者提供了一个全方位的学习路径。 1. **Angular2简介** Angular2是Google推出的一款强大的前端开发框架，用于构建单页应用程序（SPA）。相比其前身...
Angular 2应用的8个主要构造块有哪些
09-01
每个Angular应用至少有一个根模块（AppModule），它定义了应用的基本结构和组件。模块通过`@NgModule`装饰器进行定义，包含了应用所需的组件、指令、服务和配置。模块的元数据包括`declarations`（声明组件、指令和...
使用angular写一个hello world
09-03
在本文中，我们将深入探讨如何使用Angular框架创建一个简单的“Hello, World”应用程序。AngularJS，通常简称为Angular，是一个强大的前端JavaScript框架，由Google维护，用于构建动态Web应用程序。它遵循Model-View...
Angular 循环渲染元素与数据
耕耘虫
02-20 1952
一个简单的演示在 Augular 中如何实现数据或者元素的循环渲染。
angular4数据改变，页面没有渲染解决方法
csdn277的博客
12-27 1万+
代码块中ts数据进行了更新，view视图保持不变  可以引入angular4的 ChangeDetectorRef  //页面引入所需模块 import { ChangeDetectorRef } from '@angular/core'; //注入服务 constructor(public changeDetectorRef:ChangeDetectorRef ) {   该方法有以下几种...
Angular模板引用变量进行数据绑定页面数据值不改变、不刷新的问题
RookieLink
02-19 3496
问题描述 本文是关于angular的模板引用变量数据绑定的问题 在使用angular模板引用变量时，输入后不更新页面绑定值，页面不刷新，接下来我展示两段代码，大家有兴趣可以尝试一下。 代码示例 这样使用模板引用变量，是不起作用的： @Component({ selector: 'app-test', template: ` &lt;input #box&gt; &lt;p&gt;{{box.va...
angular中table绑定的值修改后，table不能渲染
qq_28584841的博客
11-20 774
记入坑angular之后，遇到的坑之一： <table mat-table [dataSource]="tableData"></table> 问题：直接给tableData push或者unshift添加值，输出的tableData是多了数据，但是页面不会渲染新添加的数据； 解决方案：先用深拷贝定义个临时变量缓存一下数组，操作临时变量，操作完了再把临时变量的值赋给tab...
angular动态渲染问题
lxfHaHaHa的博客
08-13 4834
使用angular的时候，注入双向绑定这些特性用的很爽，但其中也有一些要注意的坑，比如说这几天我在使用公司用angular写成的组件时，遇到了问题，我打算用http.get从后台动态获取数据，然后再动态生成元素，然而，，他无法动态编译，，组件未渲染，这就很尴尬了。。以下是有问题的demo：<body ng-app="myapp" ng-controller="myctrl" > <div id="m
angular2、4中数据模型改变 页面不刷新解决方案
阿龙的博客
03-27 1万+
类似于angular1里的$scope.$apply();方法  //页面引入所需模块 import { ChangeDetectorRef } from '@angular/core';//注入服务constructor(public changeDetectorRef:ChangeDetectorRef ) {}//在更改数据后不刷新的地方添加这两句话this.changeDetectorRe...
angular7中渲染html数据，解决样式无效问题
yw00yw的博客
08-23 3036
在angular项目中，往页面上渲染html数据的时候，使用的是[innerHTML]来渲染，一般渲染富文本中的Html数据，比如新闻详情之类。但是发现，渲染之后，没有了行内样式。解决方法如下： 在app下新建管道文件 ng g pipe pipes/html 在HtmlPipe管道中，写入如下代码： import { Pipe, PipeTransform } from '@angular/...
Angular 2入门指南：编写首个Web应用
4. **写作第一个Angular 2应用**：书中从创建一个简单的Reddit克隆应用开始，引导读者逐步学习Angular 2的基础概念，如TypeScript（Angular 2的首选编程语言）、依赖管理和组件化开发。 5. **TypeScript示例**：...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值