我正在尝试使用angular2 2.0.0-beta.0
我有一个表格,行内容由angular2以这种方式生成:
.... content ....
现在这个工作,我想将内容封装到一个组件"table-line".
在组件中,模板具有
但是现在桌子不再有用了.这意味着,内容不再显示在列中.在浏览器中,检查器向我显示DOM元素如下所示:
....
我怎样才能做到这一点？
1> Günter Zöchb..：
使用现有的表元素作为选择器
table元素不允许标记.只需"tr"用作选择器.
运用
属性选择器
另一种方法是使用属性选择器
@Component({
selector: '[my-tr]',
...
})
用得像
如果父组件包含您的自定义`tr`标记,则将使用它,否则将发生默认的浏览器行为.您还可以使用组件选择器`"tr [line-item]"或` `向组件选择器添加属性或类,如` ` `tr.line-item`.这样你就可以完全控制.我还没有在Angular2中尝试过这些,但我很确定这是有效的.
这有什么真正的缺点吗？它工作正常,但`tslint`的默认设置指向我[样式指南](https://angular.io/docs/ts/latest/guide/style-guide.html#!#05-03)推荐*反对*这个.我不喜欢关闭推荐的linting规则,但据我所知,这似乎是一个相当随意的风格规则,在某些情况下是不可避免的(例如OP的问题)
使我的组件选择器使用tr [line-item]是可行的，并且符合tslint抱怨的Angular Style指南规则STYLE 05-03。
2> 小智..：
我发现这个例子非常有用,但它在2,2.3版本中没有用,所以经过多次头部刮擦后再次使用一些小的改动.
import {Component, Input} from '@angular/core'
@Component({
selector: "[my-tr]",
template: `{{item}} `
})
export class MyTrComponent {
@Input("line") row:any;
}
@Component({
selector: "my-app",
template: `{{title}}
`
})
export class AppComponent {
title = "Angular 2 - tr attribute selector!";
data = [ [1,2,3], [11, 12, 13] ];
constructor() { console.clear(); }
}
3> Mark Rajcok..：
以下是使用带有属性选择器的组件的示例:
import {Component, Input} from '@angular/core';
@Component({
selector: '[myTr]',
template: `{{item}} `
})
export class MyTrComponent {
@Input('myTr') row;
}
@Component({
selector: 'my-app',
template: `{{title}}
`
})
export class AppComponent {
title = "Angular 2 - tr attribute selector";
data = [ [1,2,3], [11, 12, 13] ];
}
输出:
1 2 3
11 12 13
当然,MyTrComponent中的模板会更复杂,但你明白了.
老(beta.0)plunker.
这根本不起作用(尝试使用角度2.3).抛出错误:```错误:未捕获(在承诺中):错误:模板解析错误:无法绑定到'myTr',因为它不是'tr'的已知属性.``
推荐阅读
-
如何解决《如何将命令行参数转换为双数组以计算总和？》经验，为你挑选了0个好方法。 ...
[详细]
-
如何解决《iOS有类似Android的RecyclerView吗？》经验，为你挑选了1个好方法。 ...
[详细]
-
如何解决《在Haskell中生成下一个词典字符串》经验，为你挑选了0个好方法。 ...
[详细]
-
如何解决《使用rustc_serialize并获取不带引号的字符串》经验，为你挑选了1个好方法。 ...
[详细]
-
如何解决《skimage调整大小给出奇怪的输出》经验，为你挑选了0个好方法。 ...
[详细]
-
如何解决《在更新面板内自动将文件上载到服务器第一次不起作用》经验，为你挑选了0个好方法。 ...
[详细]
-
如何解决《C++体系结构x86_64的未定义符号》经验，为你挑选了1个好方法。 ...
[详细]
-
如何解决《有没有办法在Haskell中模拟线性类型？》经验，为你挑选了2个好方法。 ...
[详细]
-
如何解决《按条件跨多个列交换值》经验，为你挑选了1个好方法。 ...
[详细]
-
如何解决《如何在matplotlib中更改科学记数法的字体大小？》经验，为你挑选了1个好方法。 ...
[详细]
-
如何解决《解决错误“与返回的局部变量关联的堆栈内存地址”》经验，为你挑选了1个好方法。 ...
[详细]
-
如何解决《Windows命令：如何使用chdir推送当前目录以便以后弹出？》经验，为你挑选了1个好方法。 ...
[详细]
-
如何解决《ObjectResult<T>不可用的异步方法》经验，为你挑选了1个好方法。 ...
[详细]
-
如何解决《如何在java中获取Path的长度？》经验，为你挑选了1个好方法。 ...
[详细]
-
如何解决《在cx_Oracle中使用withcursoroncursor》经验，为你挑选了0个好方法。 ...
[详细]
-
如何解决《关于返回STL容器数据成员而不调用复制构造函数》经验，为你挑选了1个好方法。 ...
[详细]
-
如何解决《brewinstallopencv3显然是成功的,但缺少cv2.so和cv2.py》经验，为你挑选了0个好方法。 ...
[详细]
-
如何解决《在派生类中,如何从基类中的属性类型获取派生类型的属性？》经验，为你挑选了1个好方法。 ...
[详细]
-
吐了个 "CAO" !
Tags | 热门标签
RankList | 热门文章
-
1在tsql查询中使用日期
-
2在最后一个反斜杠后提取剩余字符串的函数
-
3将一个DataFrame行转换为平面列表
-
4是否可以保证交付AWS S3事件通知？
-
5Swift错误:'&'与'UnsafeMutablePointer'类型的非inout参数一起使用
-
6为什么设置一个dict浅拷贝到自己？
-
7UML:最终状态
-
8在二元分类中使用Lasso回归查找最佳特征
-
9Haskell vs. erlang:foldl的区别？
-
10如何使用c#windows form应用程序将excel文件上传到sql数据库表
-
11Sublime文本语法着色报价问题
-
12如何在android studio中创建一个sdk
-
13Gradle主目录和Gradle脱机目录之间的区别
-
14heroku版本在ubuntu 14.04中执行命令"heroku version"时给出错误"ERROR:EOF"？
-
15如何摆脱AngularJS Material插入的多个样式标签？
-
16如何在kubernetes中传递命令行参数？
-
17使用"未知命令类型<NSBatchDeleteRequest,..>"执行NSBatchDeleteRequest时应用程序崩溃
-
18为什么在许多语言中默认签署int类型的变量？
-
19薄荷:genymotion安装错误
-
20socket.io client:如何确定是否已安装处理程序
DevBox开发工具箱 | 专业的在线开发工具网站 
京公网安备 11010802040832号 | 京ICP备19059560号-6
Copyright © 1998 - 2020 DevBox.CN. All Rights Reserved devBox.cn 开发工具箱 版权所有
