Question

我有一个组件数组，我想显示该数组中的现有组件，但它不起作用，我怀疑在ngfor中创建并显示了一个新组件，而不是数组中的那个，因为我确实看到了新组件组件被创建但是具有默认值而不是传递给它们的当前值，我做错了什么？

HTML：

EmailField

打字稿：

 def __init__(self, *args, **kwargs):
    super(EmailField, self).__init__(*args, strip=True, **kwargs)
    # attrs is passed to CharField

Answer 1

让VisualTextDivComponent创建一个对象数组。将该数组传递给ngFor。然后将数组中的每个项目传递到app-visual-text-div组件中，如下所示：

<div #visualTextDiv class = "visual_text" [ngStyle]=setStyles()>
  <div *ngFor="let lineCounter of visualDivArray">
    <app-visual-text-div [curLineCounter]="lineCounter"></app-visual-text-div>
  </div>   
</div>

curLineCounter或更好的名称是app-visual-text-div组件中的变量。

<强> AppVisualTextDiv.ts

import { Component, Input } from '@angular/core';

@Component({
  selector: 'app-visual-text-div',
  templateUrl: './AppVisualTextDiv.html'
})
export class AppVisualTextDiv{  
  @Input() curLineCounter: {
    'id': number,
    'someValue': string,
  };
}

<强> AppVisualTextDiv.html

<div id="{{curLineCounter.id}}">
  <span>{{curLineCounter.someValue}}</span>
</div>
<!-- or whatever your use case provides -->

angular 2 ngfor显示数组中的组件

1 个答案: