Question

早上好。我之前没有回答过这个问题，但是我的问题很严厉，所以I've put together a plunk that will hopefully show what I'm doing

尽我所能 - 我有一个Service，提供当前选中的名称和曲目列表。它还有用于更改此选择的方法和用于通知何时发生更改的BehaviourSubject。当前选择的名称显示在主应用程序中。

完整的名单列表由Component显示，另一个Component提供用于更改所选名称的用户界面。

当选择发生变化时，这会反映在主应用程序和ListComponent的位置，ListComp的所选名称始终与屏幕左侧对齐。

我的问题是关于我在src/list.com.ts定位和样式化时使用的方法。这些内容位于my plnk中{40}以后的ngFor。

当组件收到所选项目已更改的通知时，我需要获取getElementById()基于该数据项创建的特定HTMLElement的引用。然后，我需要将样式应用于所选元素并移动容器，使其与我的其余布局对齐。

使用selected可以看到定位部分正常工作但是有更多的 Angular 方式吗？

我完全不确定将foreach ($array as $lijst) { if (strlen($lijst)>4) { $first = $lijst[0]; $last = $lijst[strlen($lijst)-1]; $lijst[0] = $last; $lijst[strlen($lijst)-1] = $first; echo $lijst; echo "<br/>"; }else{ echo $lijst; echo "<br/>"; } }样式应用于当前所选元素的最佳方法。任何和所有建议都很好！

我真的希望这是有道理的。我在原始构建上花了太长时间，现在在plnkr和SO上，我希望我只是错过树木（或其他东西）。

如果我能在解释中澄清任何内容，请大声喊出来。

非常感谢你们:)

Answer 1

我可能不完全理解您的问题，但我建议您不需要访问该元素，而是更新模型并让Angular进行DOM修改：

<div *ngFor="let item of listService.listData" class="cell" id="cell-{{item}}" 
    [class.selected]="item == selected">{{item}}</div>

  constructor(private listService:ListService){
accordingly
    listService.nameSelection.subscribe(name => {
      this.selected = name;
    });
  }

Plunker example

如何访问使用NgFor

1 个答案: