gpt4 book ai didi

dart - 是否可以为单个表行创建组件?

转载 作者:行者123 更新时间:2023-12-03 03:28:41 27 4
gpt4 key购买 nike

是否可以创建可用作表行(或tbody)的Angular Dart组件?我想做这样的事情:

<table>
<my-component ng-repeat="value in ctrl.values" param="value"></my-component>
</table>

而不是难看:

<table>
<tr ng-repeat="value in ctrl.values"> ...(here some td's)...</tr>
</table>

如果没有,有没有办法实现类似的目标?

谢谢,

罗伯特

最佳答案

这是你想要的?

library main;

import 'package:angular/angular.dart';
import 'package:di/di.dart';

class Item {
String name;
Item(this.name);
}

@NgComponent(
selector: 'tr[is=my-tr]',
publishAs: 'ctrl',
visibility: NgDirective.CHILDREN_VISIBILITY,
applyAuthorStyles: true,
template: '''<content></content><span>{{ctrl.value.name}}</span><span> - </td><td>{{ctrl.value}}</span>'''
)
class MyTrComponent extends NgShadowRootAware{
@NgTwoWay('param') Item value;

MyTrComponent() {
print('MyTrComponent');
}

@override
void onShadowRoot(ShadowRoot shadowRoot) {
var elements = new List<Element>.from(shadowRoot.children.where((e) => !(e is StyleElement) && !(e is ContentElement)));
ContentElement ce = shadowRoot.querySelector('content');
elements.forEach((e) {
e.remove();
var td = new TableCellElement();
td.append(e);
print('append: ${e.tagName}');
ce.append(td);
});
}
}

@NgController(
selector: "[ng-controller=row-ctrl]",
publishAs: "ctrl",
visibility: NgDirective.CHILDREN_VISIBILITY
)
class RowController {
List<Item> values = [new Item('1'), new Item('2'), new Item('3'), new Item('4')];
RowController() {
print('RowController');
}
}

class MyAppModule extends Module {
MyAppModule() {
type(MyTrComponent);
type(RowController);
}
}

void main() {
ngBootstrap(module: new MyAppModule());
}

<!DOCTYPE html>

<html ng-app>
<head>
<meta charset="utf-8">
<title>Angular playground</title>
<link rel="stylesheet" href="index.css">
</head>
<body>
<h1>Angular playground</h1>

<p>Custom TableRow</p>

<table ng-controller="row-ctrl" >
<tr is="my-tr" ng-repeat="value in ctrl.values" param="value"></tr>
</table>

<script type="application/dart" src="index.dart"></script>
<script src="packages/browser/dart.js"></script>
</body>
</html>

不能使用像 <my-component>这样的其他标签名称,因为 <table>不会接受此类标签作为内容,因此我修改了聚合物使用选择器 'tr[is=my-tr]'定义扩展DOM元素的方式。在Angular中,其他选择器都可以,只要标记名称为 tr即可。

您可以在此 GitHub repo - angular_playground中找到 项目的源代码

结果的屏幕截图

关于dart - 是否可以为单个表行创建组件?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21117240/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com