相关疑难解决方法(0)

我开始使用Angular 2(版本2.0.0-alpha.46)并创建一些组件.

使用以下代码创建组件时:

打字稿:

import {ComponentMetadata as Component, ViewMetadata as View} from 'angular2/angular2';

@Component({
   selector: 'my-component'
})

@View({
     template: '<div class="myClass">Hello My component</div>'
 })

export class MyCompoent{
    constructor() {
        console.info('My Component Mounted Successfully');
    }
}

HTML:

<my-component></my-component>

它工作正常,但是当我这样做时Inspect element,我可以看到这样生成的标签:

输出HTML

<my-component>
    <div>Hello My component</div>
<my-component>

问题

它将<my-component>标记保存在HTML中,并且我的一些CSS没有按预期工作.

题

有没有办法删除<my-component>类似于角1 的标签(replace: true在指令中)？

在角度2中,svg-rect是一个创建rect的组件,如下所示,

<svg height="550" width="450" x="0" y="0">
    <g id="svgGroup">
        <svg-rect>
        <!--template bindings={}-->
            <rect x="10" y="10" height="100" width="100" fill="red" stroke="#000" stroke-width="2"></rect>
        <!--template bindings={}-->
        </svg-rect>
        <svg-rect>
        <!--template bindings={}-->
            <rect x="10" y="10" height="100" width="100" fill="red" stroke="#000" stroke-width="2"></rect>
        <!--template bindings={}-->
        </svg-rect>
    </g>
</svg>

但由于创建了特殊元素标签,因此不会呈现rect.如果删除了svg-rect标签,则会呈现rect

<svg height="550" width="450" x="0" y="0">
    <g id="svgGroup">
        <!--template bindings={}-->
        <rect x="10" y="10" height="100" width="100" fill="red" stroke="#000" stroke-width="2"></rect>
        <!--template bindings={}-->
        <!--template bindings={}-->
        <rect x="10" y="10" height="100" width="100" fill="red" stroke="#000" stroke-width="2"></rect>
        <!--template bindings={}-->
    </g> …

我有一个角度组件，我想在带有 ngFor 的表格中使用它，但它破坏了表格布局。我的桌子看起来像：

<table class="table table-stripped">
  <thead>
    <th style="width: 30%;">Network</th>
    <th style="width: 10%;">Quantity</th>
    <th style="width: 30%;">Supplier</th>
    <th style="width: 30%;">Conn Type</th>
    <th></th>
  </thead>
  <tbody>
    <tr *ngFor="let prod of opportunity.products; let i = index;">
      <app-product-row [product]="prod"></app-product-row>
    </tr>
  </tbody>
</table>

子组件如下所示：

<td style="width: 30%;">
...
</td>
<td  style="width: 10%;">
...
</td>
<td style="width: 30%;">
...
</td>
<td style="width: 30%;">
...
</td>
<td>
...
</td>

但所有子组件都放置在第一个 td 元素中，因为 Angular 放入 <app-product-row ...> 标记，这意味着这些组件无法正确渲染。我尝试将 app-product-row 放在 tr 本身中，但这也不起作用。

我怎样才能让它正确渲染表格？

我正在使用嵌套的数据编写一个 HTML 表格组件，这样输出可能如下所示：

<table>
  <tr><td>Parent</td></tr>
  <tr><td>Child 1</td></tr>
  <tr><td>Child 2</td></tr>
  <tr><td>Grandchild 1</td></tr>
</table>

我想使用递归组件来创建它，如下所示：

<table>
  <data-row *ngFor="let row of rows" [row]="row"></data-row>
</table>

数据行：

<tr><td>{{row.name}}</td></tr>
<data-row *ngFor="let child of row.children" [row]="child"></data-row>

然而，这会在表格行周围添加一个环绕元素，这会破坏表格并且是无效的 HTML：

<table>
  <data-row>
    <tr>...</tr>
    <data-row><tr>...</tr></data-row>
  </data-row>
</table>

是否可以删除此data-row包装元素？

一种解决方案：

一种解决方案是使用<tbody data-row...></tbody>我目前正在做的事情，但这会导致嵌套tbody元素，这违反了W3C规范

其他想法：

我尝试过使用ng-container，但似乎不可能，<ng-container data-row...></ng-container>所以这是不可能的。

我也考虑过放弃使用表格，但是使用 HTML 表格是允许将数据简单复制到电子表格中的唯一方法，这是一项要求。

我考虑的最后一个选择是在生成表之前展平数据，但是，由于树可以随意展开和折叠，这会导致过度重新渲染或非常复杂的模型。

编辑：这是我当前解决方案的 Plunk（违反规范）：http://plnkr.co/edit/LTex8GW4jfcH38D7RB4V ?p=preview

我正在努力教自己angular2.我试图构建组件"触发器调整大小",我想渲染为:

<a class="hidden-xs" href="">
    <em class="fa fa-navicon"></em>
</a>

而不是:

<trigger-resize>

   <a class="hidden-xs" href="">
      <em class="fa fa-navicon"></em>
   </a>
</trigger-resize>

(我不希望自定义选择器渲染)

在角度1.我知道它将通过"replace:true"选项实现,但是有可能在angular2中实现它吗？

亲切的问候

我想使用Vue渲染一个包含行的表,但是将单元格作为一个组件.

我已经做了一个我希望看到的最终结果的例子,并且有一些代码与我认为我可以解决这个问题有关:

HTML

<div id="app">
  <table>
    <thead>
      <tr>
        <th>Row</th>
        <th>ID</th>
        <th>Name</th>
        <th>Age</th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="(row, rindex) in people">
        <td>{{ rindex }}</td>
        <cell v-for="(value, vindex, rindex) in row" :value="value" :vindex="vindex" :rindex="rindex"></cell>
      </tr>
    </tbody>
  </table>
  <template id="template-cell">
    <td>{{ value }}</td>
  </template>
</div>

JS

// Register component
Vue.component('cell', {
  template: '#template-cell',
  name: 'row-value',
  props: ['value', 'vindex', 'rindex']
  // In here I would like to access value, vindex and rindex
});
// Start application
new Vue({
  el: '#app', …

我看到对角度2的数据表的支持非常差.DataTables对我不起作用(已知未解决的问题)所以我认为我会为自己写一些简单的东西.顺便说一句,我会学到一些有用的东西.我想以这种方式构建我的表:

<my-table> 
    <my-table-row *ngFor="let row of rows">
         <my-table-col>{{row.col1}}</my-table-col>
         <my-table-col>{{row.col2}}</my-table-col>
    </my-table-row>
</my-table>

所以我创建了一个带有简单滤镜输入的组件.现在,我想过滤我的桌子.Angular应该以某种方式将my-table-col(s)中的数据分配给某个变量(也许2路数据绑定会有用吗？),然后我会使用keyup事件触发的一些函数进行过滤,数据应该自动更新但我做不知道该怎么做.

import { Component, Input, OnInit } from '@angular/core';
import { BrowserModule }  from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';

@Component({
    selector: 'my-table',
    template: `
    <div style="width: 100%">
        <div style="float: left; height: 50px; width: 100%">
            Search: <input type="text" [(ngModel)]="filterValue" style="height: 30px; border: 1px solid silver"/> {{filterValue}}
        </div>
        <div style="float: left; width: 100%">
            <table>
                <ng-content></ng-content>
            </table>
        </div>
    </div>
    `
})
export class MyTableComponent { 
    filterValue: string;
} …