问题标签 [angular2-components]

I am creating a component to be reused throughout my app, the important code below

.ts

.html

I am creating these objects in my html templates like so

How would I go about inputting the constructor variables in a html tag? For the life of me I can't find an appropriate reference on how to do it.

我是 Angular 2 的新手。我有一个表单输入表，在上传/选择文件时列出了许多文件名。为每个文件输入数据后，我想用各自的表单数据分配/添加所选文件并将其发送到服务器。

1. 如何将相应的文件分配/添加到其表单数据？
2. 如何将这些文件及其各自的表单数据发送到服务器？

下面是我的代码。任何帮助或解决方案将不胜感激。谢谢。

模板

零件

我正在制作一个用于显示项目列表的组件，该组件具有从它继承的其他两个组件（特殊类型的列表）。

我收到以下错误：

DashboardComponent这是用于显示列表的容器组件 ( ) HTML：

这是顶级组件：

我省略了派生类，因为它们仅在 html 中有所不同。

这里有什么问题？我应该提到，这曾经在没有类继承的情况下工作，但我重构了它，因为它有很多共同点。

我有一个来自$http请求的简单列表。

ngFor我直接使用加号渲染流AsyncPipe

列表中的每个元素都有一个复选框来选择它

然后我有一个“删除”按钮，应该删除所有选定的项目

1. 我想如何以每次使用新值更新流的方式处理选择？显然只是设置item.selected不会修改流

2. 如何使用流从campaigns$项目的子集（selected那些）中提取而不循环活动 $.value？可能吗？

更新

假设我创建了一个新流，selection$因此我可以将此流与campaigns$. 我应该如何在不获取和重置的情况下从流中添加/删除选择selection$.value？

我正在使用 Angular 2-rc3 并且有一个Component并且我想以一种不同的方式应用嵌入。这是我的组件：

我像这样使用它：

如您所见，我正在尝试定义一个将由我的组件使用的内联模板。现在这发生了可怕的错误。首先，一个数据绑定异常说它can't read property 'make' of undefined。它试图读取item.make我周围的组件，而不是MyListComponent. 但即使我暂时禁用它：

然后出现第二个问题：

所以 Angular 实际上并没有复制模板以供在 中使用*ngFor，它只是绑定元素并且它们最终与最后一项相关联。

我怎样才能让它工作？

我对 AngularJS 也有同样的问题，petebacondarwin 发布了一个通过 compile 操作 DOM 的解决方案，这很棒。通过注入我的组件，我也有 Angular 2 的这个选项ElementRef，但是！一个很大的区别是AngularJS 在数据绑定之前就关闭了，这意味着在模板中compile使用没有问题。{{item.make}}使用 Angular 2，这似乎是不可能的，因为{{item}}它是预先解析的。那么解决这个问题的最佳方法是什么？使用稍微不同的符号[[item]]和字符串替换整个东西似乎不是最优雅的方式......

提前致谢！

// 编辑：这是一个重现问题的Plnkr。

我有一个小 Plunk，我正在用它来玩 Angular 2 中当前可用的新路由器 3.0 alpha。它通常运行良好，但问题是一旦我点击一个指向“详细信息”的链接具有特定 ID 的组件，当我单击具有不同 ID 的不同链接时，它永远不会改变。该组件永远不会被重新实例化，因此它只会显示它在第一次加载时传递的内容。

这是有问题的组件：

这是演示问题的 Plunk。单击一个作者姓名，然后单击另一个以查看它不会更改。

我想在更改输入参数时执行一些操作。假设我有一个具有type输入变量的 DatePicker 组件，并且我想date在更改类型时对另一个变量执行一些操作。怎么做？

错误：表达式在检查后已更改。

我一直在加载组件中工作，以便在从 API 调用和加载内容之间进行友好的等待。只是文本时没有问题，但是当信息有图像或更多信息时，加载组件在内容完全加载之前消失。

我查看了 Angular2 的生命周期钩子，但它们中的任何一个看起来都适合我的要求。

主要是我的组件了解 isLoading = true 何时必须消失。

这是我尝试做的方式。

我有一个子组件，从其父组件接收数据并在 div 中显示文本。父母有可能undefined作为数据发送。当它执行时，div 应该将其高度转换为 0，我通过 css 转换来实现。由于我不知道文本的长度，因此应该将 div 的高度转换为auto. 我找到了一个这样做的代码示例，我已经将其转换为适合我的组件。

现在的问题是，当调用 ngOnChange 时，属性语言实际上已经改变，但是视图绑定到并且在 ngOnChange 函数中分配给它this.shownLanguage时实际上并没有更新。对自身this.language的绑定也是如此。this.languageOnChange 事件被击中得太早了。由于 div 中缺少文本，我没有收到正确的高度，因此我的计算运行不正确。实际上是否有一个事件在视图更改时触发，或者是否有办法强制重绘视图，以便我实际上可以获得具有正确高度的 div？

我注意到 Angular2 Renderer 没有从 DOM 中提取数据的 API，例如 textContent 或 innerHTML 或 getAttribute。甚至@ViewChild包含一个目标元素，您可以使用 JS DOM API 更改传统方式，但不建议将其用于其他环境，例如 WebWorker 或 Native Apps。

以下示例将每个单词包装在一个跨度中。我做得正确还是可以改进？