Angular 具有动态元素id的角度4渲染器2

我有一个动态

id

，如下所示。您能告诉我如何从组件（

ts

）文件中获取此

id

注意：我的要求是，当用户单击按钮时，我需要将内容滚动到该动态项（实际上这是一个条形图项，我可以处理）

.html

<ion-card *ngFor="let interval of intervals; let i = index" id="{{interval.key}}">
    <ion-card-header>
      {{interval.sleepingTimeRange}} {{interval.timeDuration}}
    </ion-card-header>
    <ion-card-content>
      {{interval.notes}}
    </ion-card-content>
  </ion-card>

这是调用

scrollTo（）

的方法

subscribeIntervals(): void {
        this.events.subscribe('intervals', (data, selectedItem) => {
            this.intervals = [];

            _.forEach(data, (value, key) => {
                let interval: any = {
                    notes: '',
                 };

                interval.key = value.key;
                this.intervals.push(interval);
            });

            this.scrollTo(selectedItem.key);//scroll to

        });
    }

错误：当实施@Günter Zöchbauer解决方案时

js:3错误：未捕获（承诺中）：错误：模板解析 错误：无法绑定到“scrollIntoView”，因为它不是已知属性 “离子卡”的名称。 1.如果“离子卡”是一个角度组件，并且具有“scrollIntoView”输入，则验证它是否是该模块的一部分。 2.如果“ion card”是一个Web组件，则将“CUSTOM_ELEMENTS_SCHEMA”添加到此组件的“@NgModule.schemas”以抑制此消息。 3.若要允许任何属性，请将“无错误模式”添加到此组件的“@NgModule.schemas”。（”

][scrollIntoView]=“间隔键”>

”：ng:///AppModule/SummaryPage。html@96：62错误：模板分析错误：无法绑定到“scrollIntoView”，因为它

不是“离子卡”的已知属性。 1.如果“离子卡”是一个角度组件，并且具有“scrollIntoView”输入，则验证它是否是该模块的一部分。 2.如果“ion card”是一个Web组件，则将“CUSTOM_ELEMENTS_SCHEMA”添加到此组件的“@NgModule.schemas”以抑制此消息。 3.若要允许任何属性，请将“无错误模式”添加到此组件的“@NgModule.schemas”。（”

][scrollIntoView]=“间隔键”>

”：ng:///AppModule/SummaryPage。html@96:62
在g(http://localhost:8100/build/polyfills.js:3:7133)
在syntaxError(http://localhost:8100/build/main.js:113362:34)
在TemplateParser.parse(http://localhost:8100/build/main.js:123371:19)
在JIT编译器上。\u compiletTemplate(http://localhost:8100/build/main.js:137054:39)
在http://localhost:8100/build/main.js:136978:62
at Set.forEach（本机）
在JIT编译器上。\u compileComponents(http://localhost:8100/build/main.js:136978:19)
在createResult(http://localhost:8100/build/main.js:136863:19)
在t.invoke(http://localhost:8100/build/polyfills.js:3:14529)
在n.run(http://localhost:8100/build/polyfills.js:3:9741)
在http://localhost:8100/build/polyfills.js:3:6774
在t.invokeTask(http://localhost:8100/build/polyfills.js:3:15213)
在n.runTask(http://localhost:8100/build/polyfills.js:3:10390)
至少(http://localhost:8100/build/polyfills.js:3:5313)
在g(http://localhost:8100/build/polyfills.js:3:7133)
在syntaxError(http://localhost:8100/build/main.js:113362:34)
在TemplateParser.parse(http://localhost:8100/build/main.js:123371:19)
在JIT编译器上。\u compiletTemplate(http://localhost:8100/build/main.js:137054:39)
在http://localhost:8100/build/main.js:136978:62
at Set.forEach（本机）
在JIT编译器上。\u compileComponents(http://localhost:8100/build/main.js:136978:19)
在createResult(http://localhost:8100/build/main.js:136863:19)
在t.invoke(http://localhost:8100/build/polyfills.js:3:14529)
在n.run(http://localhost:8100/build/polyfills.js:3:9741)
在http://localhost:8100/build/polyfills.js:3:6774
在t.invokeTask(http://localhost:8100/build/polyfills.js:3:15213)
在n.runTask(http://localhost:8100/build/polyfills.js:3:10390)
至少(http://localhost:8100/build/polyfills.js:3:5313)
在g(http://localhost:8100/build/polyfills.js:3:7133)
在l(http://localhost:8100/build/polyfills.js:3:6251)
在l(http://localhost:8100/build/polyfills.js:3:5937)
在http://localhost:8100/build/polyfills.js:3:6765
在t.invokeTask(http://localhost:8100/build/polyfills.js:3:15213)
在n.runTask(http://localhost:8100/build/polyfills.js:3:10390)
至少(http://localhost:8100/build/polyfills.js:3:5313)

错误2:

core.es5.js:1085错误类型错误：无法读取的属性“scrollTo” 未定义 在SummaryPage.scrollTo（）处 在 在 at Array.forEach（本机） 在Events.publish（）上 在SVGRectElement。() 在SVGRectElement。() 在t.invokeTask（）处 在Object.onInvokeTask（）处 在t.invokeTask（）处 在n.runTask（）处 在SVGRectElement.invoke（）处

---

无需从DOM读取，即可执行以下操作：

@Directive({
  selector: '[scrollIntoView]'
})
class ScrollIntoViewDirective {
  @Input() key:string;

  constructor(private elRef:ElementRef) {}

  srcrollTo() {
    this.elementRef.nativeElement.scrollIntoView();
  }
}

@ViewChildren（ScrollIntoViewDirective）scrollIntoView:QueryList；
scrollTo（elementId:number）{
this.scrollIntoView.toArray（）.find（（s）=>s.key==elementId.scrollTo（）；
}

按钮在哪里？您通常不会以角度方式读取DOM，这就是为什么渲染器不提供任何关于读取DOM的信息。实际上，这里的按钮是条形图（SVG）的一项。您可以认为，当用户单击它时，它被称为

scrollTo（）

method.@GünterZöchbauerI仍然不知道按钮与上面的HTML有什么关系。在您的问题中，我看不到任何与SVG相关的内容。因此，我不知道该按钮可以获得哪些信息。我认为没有其他方法可以读取

offsetTop

。只有其他方法可以获得元素引用。请查看我的帖子@GünterZöchbauerOK上的更新。当然。我会实现这一点，并会让你知道。谢谢。希望我需要给出这个否

id=“{interval.key}}”

在

离子卡上

对不起，我不理解你的评论。我看不需要它。那么我应该传递哪个值作为

elementId

？因为我有一个项目列表。我决定用这个唯一的键

id=“{{interval.key}}}”

来分隔这些项目。你可以在我的帖子上看到。没有这些，这是怎么回事？你能解释一下吗？如果你能创造一个可以复制的Plunker，我来看看。

<ion-card-header> "): ng:///AppModule/SummaryPage.html@96:62 Error: Template parse errors: Can't bind to 'scrollIntoView' since it

<ion-card-header> "): ng:///AppModule/SummaryPage.html@96:62
at g (http://localhost:8100/build/polyfills.js:3:7133)
at syntaxError (http://localhost:8100/build/main.js:113362:34)
at TemplateParser.parse (http://localhost:8100/build/main.js:123371:19)
at JitCompiler._compileTemplate (http://localhost:8100/build/main.js:137054:39)
at http://localhost:8100/build/main.js:136978:62
at Set.forEach (native)
at JitCompiler._compileComponents (http://localhost:8100/build/main.js:136978:19)
at createResult (http://localhost:8100/build/main.js:136863:19)
at t.invoke (http://localhost:8100/build/polyfills.js:3:14529)
at n.run (http://localhost:8100/build/polyfills.js:3:9741)
at http://localhost:8100/build/polyfills.js:3:6774
at t.invokeTask (http://localhost:8100/build/polyfills.js:3:15213)
at n.runTask (http://localhost:8100/build/polyfills.js:3:10390)
at a (http://localhost:8100/build/polyfills.js:3:5313)
at g (http://localhost:8100/build/polyfills.js:3:7133)
at syntaxError (http://localhost:8100/build/main.js:113362:34)
at TemplateParser.parse (http://localhost:8100/build/main.js:123371:19)
at JitCompiler._compileTemplate (http://localhost:8100/build/main.js:137054:39)
at http://localhost:8100/build/main.js:136978:62
at Set.forEach (native)
at JitCompiler._compileComponents (http://localhost:8100/build/main.js:136978:19)
at createResult (http://localhost:8100/build/main.js:136863:19)
at t.invoke (http://localhost:8100/build/polyfills.js:3:14529)
at n.run (http://localhost:8100/build/polyfills.js:3:9741)
at http://localhost:8100/build/polyfills.js:3:6774
at t.invokeTask (http://localhost:8100/build/polyfills.js:3:15213)
at n.runTask (http://localhost:8100/build/polyfills.js:3:10390)
at a (http://localhost:8100/build/polyfills.js:3:5313)
at g (http://localhost:8100/build/polyfills.js:3:7133)
at l (http://localhost:8100/build/polyfills.js:3:6251)
at l (http://localhost:8100/build/polyfills.js:3:5937)
at http://localhost:8100/build/polyfills.js:3:6765
at t.invokeTask (http://localhost:8100/build/polyfills.js:3:15213)
at n.runTask (http://localhost:8100/build/polyfills.js:3:10390)
at a (http://localhost:8100/build/polyfills.js:3:5313)

@Directive({
  selector: '[scrollIntoView]'
})
class ScrollIntoViewDirective {
  @Input() key:string;

  constructor(private elRef:ElementRef) {}

  srcrollTo() {
    this.elementRef.nativeElement.scrollIntoView();
  }
}

<ion-card *ngFor="let interval of intervals; let i = index" 
   [scrollIntoView]="interval.key">

@ViewChildren(ScrollIntoViewDirective) scrollIntoView:QueryList<ScrollIntoViewDirective>;

scrollTo(elementId: number) {
  this.scrollIntoView.toArray().find((s) => s.key == elementId).scrollTo();
}