相关疑难解决方法(0)

我有一个表,我想在其中显示一个表行,这是一个组件.而且我还想将数据传递给该组件:

<table>
    <th>
        <td>col 1</td>
        <td>col 2</td>
        <td>col 3</td>
    </th>
    <tr>
        <my-component [data1]="data1" [data2]="data2"></my-component>
    </tr>
    <tr *ngFor="let item of list">
        {{item}}
    </tr>
</table>

在my-component,HTML是少数几个<td></td>从data1和呈现的数据data2.

但是在渲染之后,由于<my-component></my-component>我的CSS破坏导致所有my-componentHTML(整个表行)显示在第1列中.

结果如上:

<table>
    <th>
        <td>col 1</td>
        <td>col 2</td>
        <td>col 3</td>
    </th>
    <tr>
        <my-component>
            <td>data1.prop1</td>
            <td>data1.prop2</td>
        </my-component>
    </tr>
    <tr *ngFor="let item of list">
        {{item}}
    </tr>
</table>

我尝试了以下方法:

@Component({
    selector: '[my-component]',
    templateUrl: 'my-component.html'
})

<tr my-component [data1]="data1" [data2]="data2"></tr>

但这会导致错误Can't bind to 'data1' since it isn't …

我要这个:

<div *ngIf="...">div 1...</div>
<div *ngIf="...">div 2...</div>
<div *ngIf="...">div 3...</div>

但我不想重复*ngIf,所以我<my-component>用这个模板创建了我的组件:

<div>div 1...</div>
<div>div 2...</div>
<div>div 3...</div>

我把*ngIf放在我的组件标签中: <my-component *ngIf="...">

问题是Angular 2将<my-component>标记放在DOM中,我不想要它.

对于任何了解ASP.NET WebForms的人,我希望Angular 2中的一个组件像<asp:PlaceHolder>控件一样工作......

我知道了类似的问题，这是所有 在 该 网站，但我的问题是从那些稍有不同。

我想编写一个为行提供服务的组件，但每个实例可能会生成一行到多行，具体取决于提供的数据：

<tbody>
    <!-- intended usage -->
    <data-rows *ngFor="let row of dataRows" [row]="row">
    </data-rows>
</tbody>

需要创建：

<tbody>

    <!-- from first <data-rows> instance -->
    <tr><td> instance 1, row 1 </td></tr>

    <!-- from second <data-rows> instance -->
    <tr><td> instance 2, row 1 </td></tr>
    <tr><td> instance 2, row 2 </td></tr>
    <tr><td> instance 2, row 3 </td></tr>

    <!-- from third <data-rows> instance -->
    <tr><td> instance 3, row 1 </td></tr>

</tbody>

大多数解决方案建议使用属性选择器并在真正的 <tr> 上使用 *ngFor。这在我的情况下不起作用，因为实例和行之间没有一对一的关系。另外，父组件不知道应该渲染多少个<tr>；这是由 <data-rows> 决定的。

当然，一个简单的 <data-rows> 实现会失败，因为它会向 …

我正在尝试使用 ngFor 循环一些项目，并为每个项目创建一个 mat-expansion-panel。

我想将每个项目的逻辑封装到一个项目组件中：

    <item></item>

初步尝试：

<mat-accordion>
  <div *ngFor="let item of items" >
    <item [item]="item"></item>
  </div>
</mat-accordion>

其中项目模板是：

    <mat-expansion-panel>
      <mat-expansion-panel-header>
        Header Content
      </mat-expansion-panel-header>

      <div>
         Expandable content
      </div>
    </mat-expansion-panel>

这种方法的问题在于，我的组件在<mat-accordion>和之间有一个额外的 html 元素<mat-expansion-panel>，这会弄乱手风琴的 css。

有没有办法让我的组件可以提供标题和内容？

    <mat-accordion>
      <div *ngFor="let item of items" >
          <mat-expansion-panel>
            <mat-expansion-panel-header>
              <!-- put item component header here->
            </mat-expansion-panel-header>

          <div>
            <!-- put item component content here->
          </div>
        </mat-expansion-panel>
      </div>
    </mat-accordion>

我已经阅读了 ng-content，但我认为这与我想要的相反，我不想将自定义内容推送到我的组件中，我想从我的组件中提取元素并将它们呈现在父级中。

我确实意识到我可以创建 2 个组件，item-header 和 item-content。但是，我真的很想将该登录名保留在一个组件中。

我在这里陷入困境。致力于重构一堆相当混乱的角度组件及其模板的 HTML。

问题是，在一种特殊情况下，我不能在 DOM 中拥有父元素。现在，模板选择器设置如下：

<thisComponent *nIf="blah" [someParam]="hello"><thisComponent>

在 DOM 中呈现：

 <thisComponent>
    <div>Hello</div>
    <div>World</div>
 <thisComponent>    

这破坏了我们想要使用的 CSS 并与正在呈现的其余内容保持一致。

我希望在没有父thisComponent元素的情况下完成上述工作。

我在想这样的事情可能会起作用：

<ng-container thisComponent *nIf="blah" [someParam]="hello"></ng-container>

（然后将选择器更改为属性选择器 ala [thisComponent]）

但看来这不起作用。

有没有办法在 DOM 中不渲染父元素的情况下完成上述操作？

更多背景信息。还有另一个重复的问题建议使用属性选择器，但问题是您仍然需要一个父元素（带有属性）。理想情况下，Angular 将允许父元素成为 ng-container，它不会渲染父元素。但这不受支持。

为什么需要这个：

CSS 喜欢干净的 DOM 结构，并且某些功能完全依赖于它......即 Flex 布局。当 Flex 容器和 Flex 对象之间存在额外的 DOM 层时，Flex 布局会完全崩溃。

通过调用导航到新屏幕时，NavController.navigateForward('/url')您将获得免费的本机动画，该动画可将屏幕滑入查看。除非我在页面组件中使用组件，否则这将按预期工作。当我这样做时，除了页面内的组件之外，所有内容都会按预期进行动画处理。

当下一页导航到内容和标题时，所有内容都会按预期滑入视图。

<ion-header>
    <h1>The Title</h1>
</ion-header>
<ion-content>
    Some content...
</ion-content>

但是，如果我将h1标签提取到组件中，则只有“某些内容...”会滑入视图。“标题”显示时没有动画。

<ion-header>
    <app-my-component>The Title</app-my-component>
</ion-header>
<ion-content>
    Some content...
</ion-content>

我刚刚开始将我的Angular 1.x指令转换为Angular 2组件,但我首先陷入困境.我有2个指令,即row-field和column-field.它们可以用来创建自举12单位网格;

<row-field>
    <column-field span="4">First Cell</column-field>
    <column-field span="2" offset="1">Second Cell</column-field>
    <column-field span="4">Third Cell</column-field>
</row-field>

这将输出如下的html;

<div class="row">
    <div class="span4">First Cell</div>
    <div class="span2 offset1">Second Cell</div>
    <div class="span4">Third Cell</div>
</div>

在Angular 1.x中使用tranclude和replace属性指令相当容易.但是我在Angular 2中创建相同的行为时遇到了麻烦.我的列字段组件是这样的;

@Component({
    selector: 'column-field',
    template: '<ng-content [ngClass]="'span{{span}} offset{{offset}}'"></ng-content>',
    directives: [NgClass]
})
export class ColumnFieldComponent {
    @Input() span;
    @Input() offset;
}

但它没有创建所需的html输出.输出中总是有一个列字段标记,我想要的是用div标记替换column-field标记并将其属性移动到这个新的div标记.

任何建议将被认真考虑.

我正在使用Angular2 Material 网格列表组件,我想拆分list和item单独的组件.

这是我的list:

@Component({
  selector: 'app-list',
  template: `
    <md-grid-list cols="12">
        <app-item *ngFor="let item of items"></app-item>
    </md-grid-list>
  `
})
export class ListComponent {
  items: Array<number> = [1, 2]; // dummy data
}

这是我的item组件:

@Component({
  selector: 'app-item',
  template: `
    <md-grid-tile [colspan]="6">
      First
    </md-grid-tile>
    <md-grid-tile [colspan]="6">
      Second
    </md-grid-tile>
  `
})
export class ItemComponent implements OnInit { }

问题是子item组件在包装器<app-item>自定义(无效)DOM元素内的实际DOM中呈现.由于Angular2 Material 网格列表组件需要以下结构,因此样式被破坏:

<md-grid-list cols="12">
  <!-- Item 1 -->
  <md-grid-tile [colspan]="6"></md-grid-tile> …

我有一个表,并希望动态地向该表添加一行.以下是我的代码!

<tr *ngIf="customer">
  <td>4</td>
  <td>
    <input type="text" name="firstName" required minlength="2">
  </td>
  <td>
    <input type="text" name="lastName" required minlength="2">
  </td>
  <td>
    <input type="text" name="countryCode" required maxlength="2">
  </td>
  <td>
    <input type="number" name="age" required minlength="2">
  </td>
  <td>
    <i class="fas fa-times" (click)="cancel()"></i>
  </td>
  <td>
    <i class="far fa-save" (click)="save()"></i>
  </td>
</tr>

在表格下方,应添加上面的行.是保存上面的html(要添加的单个表行)的选择器.目前,当单击按钮时,上面的行显示在页面的最底部,而不是按预期添加到表中.

<table class="table">
        <thead>
          <tr>
            <th scope="col">#</th>
            <th scope="col">First</th>
            <th scope="col">Last</th>
            <th scope="col">Country</th>
            <th scope="col">Gender</th>
            <th scope="col">Age</th>
            <th scope="col">Edit</th>
            <th scope="col">Delete</th>
          </tr>
        </thead>
        <tbody>
          <tr *ngFor="let customer of customerArray; let i = index">
            <td>{{i + …