Fatal编程技术网
  • angular/
  • Angular 如何访问ngFor指令中组件的ID？

Angular 如何访问ngFor指令中组件的ID？

angular

Angular 如何访问ngFor指令中组件的ID？,angular,Angular,如果这是重复的话，我很抱歉，但我发现很难得到答案，因为我不确定我问的问题是否正确 我想画一个小svg条（多次）作为ngFor的一部分 比方说，我有 列表.组件.ts import { Component } from '@angular/core'; @Component({ selector: 'app-list', template: ` <div *ngFor="let item of items"> <app-s

如果这是重复的话，我很抱歉，但我发现很难得到答案，因为我不确定我问的问题是否正确

我想画一个小svg条（多次）作为ngFor的一部分

比方说，我有

列表.组件.ts

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

@Component({
    selector: 'app-list',
    template: `
        <div *ngFor="let item of items">
            <app-svgbar [value]="someNumber"></app-svgbar>
        </div>`
})

export class ListComponent {

    items: number[] = [0,1,2,3,4,5,6,7,8,9]

}

import { Component, OnInit, Input } from '@angular/core';
import * as SVG from 'svg.js';

@Component({
    selector: 'app-svgbar',
    template: `<div id="barID"></div>`
})

export class SvgSingleBarComponent implements OnInit {

    @Input() value: number;

    ngOnInit() {
        this.drawSvg(this.value)
    }

    drawSvg( value ) {
        let draw = SVG('barID').size(10, 10) // This is my problem
        draw.rect(value, 10)
        .fill('#000')
    }
}

从'@angular/core'导入{Component}；
@组成部分({
选择器：“应用程序列表”，
模板：`

为SVG的索引传入一个
@Input（）
，您可以将其连接到ID以使其唯一。或者，或者为每个SVG组件上的ID生成一个随机字符串

连接示例：


@Component({
    selector: 'app-svgbar',
    template: `<div id="barID-{{index}}"></div>`
})
export class SvgSingleBarComponent implements OnInit {
    @Input() index: number;
    @Input() value: number;

    ngOnInit() {
        this.drawSvg(this.value)
    }

    drawSvg( value ) {
        let draw = SVG('barID-' + this.index).size(10, 10) // This is my problem
        draw.rect(value, 10)
        .fill('#000')
    }
}


执行上述操作，所有操作似乎都能完美地工作，没有错误。我将展示一个Plnkr示例，但它不允许我保存您的Plnkr，因为它是一个嵌入链接。
传入一个
@Input（）
用于SVG的索引，您可以将其连接到ID以使其唯一。或者，或者为每个SVG组件上的ID生成一个随机字符串

连接示例：


@Component({
    selector: 'app-svgbar',
    template: `<div id="barID-{{index}}"></div>`
})
export class SvgSingleBarComponent implements OnInit {
    @Input() index: number;
    @Input() value: number;

    ngOnInit() {
        this.drawSvg(this.value)
    }

    drawSvg( value ) {
        let draw = SVG('barID-' + this.index).size(10, 10) // This is my problem
        draw.rect(value, 10)
        .fill('#000')
    }
}



执行上述操作后，一切似乎都能完美地工作，没有错误。我将展示一个Plnkr示例，但它不允许我保存您的Plnkr，因为它是一个嵌入链接。
您这里的问题是如何使用SVG库

这是你的宝物，工作：

为了实现这一点，您不需要使用索引和索引来跟踪元素。
只需将
nativeElement
添加到
SVG
lib用法中

这段代码就可以了


import { Component, OnInit, Input, NgZone, ElementRef } from '@angular/core';
import { id } from "@swimlane/ngx-datatable/release/utils";

@Component({
  selector: 'app-svg',
  template: `<div id="bar-{{index}}"></div>`,
  styles: []
})
export class SVGComponent implements OnInit {

  @Input() value: number;
  @Input() index: number;

  constructor(public ngZone: NgZone, public elementRef: ElementRef) {}

  ngOnInit() {
    this.drawSVG()
  }

  drawSVG() {
    let id = 'bar-' + this.index;
    // console.log('id: ',id);
    // console.log('value: ',this.value);
    this.ngZone.run(() => {
      console.log(id);
      let draw = SVG(this.elementRef.nativeElement).size(100, 10)
      draw.rect(10*this.value,10)
      .radius(4)
      .fill('#3db8db')  
    });
  }

} 



从'@angular/core'导入{Component，OnInit，Input，NgZone，ElementRef}；
从“@swimlane/ngx datatable/release/utils”导入{id}”；
@组成部分({
选择器：“应用程序svg”，
模板：``，
样式：[]
})
导出类SVGComponent实现OnInit{
@输入（）值：数字；
@Input（）索引：数字；
构造函数（public ngZone:ngZone，public elementRef:elementRef）{}
恩戈尼尼特（）{
this.drawSVG（）
}
drawSVG（）{
设id='bar-'+this.index；
//console.log（'id:'，id）；
//console.log（'value:'，this.value）；
此.ngZone.run（（）=>{
console.log（id）；
让draw=SVG（this.elementRef.nativeElement）.size（100,10）
draw.rect（10*this.value，10）
.半径（4）
.fill（“#3db8db”）
});
}
} 



NgZone只是为了确保angular将呈现对第三方库的更改。
这里的问题是如何使用SVG库

这是你的宝物，工作：

为了实现这一点，您不需要使用索引和索引来跟踪元素。
只需将
nativeElement
添加到
SVG
lib用法中

这段代码就可以了


import { Component, OnInit, Input, NgZone, ElementRef } from '@angular/core';
import { id } from "@swimlane/ngx-datatable/release/utils";

@Component({
  selector: 'app-svg',
  template: `<div id="bar-{{index}}"></div>`,
  styles: []
})
export class SVGComponent implements OnInit {

  @Input() value: number;
  @Input() index: number;

  constructor(public ngZone: NgZone, public elementRef: ElementRef) {}

  ngOnInit() {
    this.drawSVG()
  }

  drawSVG() {
    let id = 'bar-' + this.index;
    // console.log('id: ',id);
    // console.log('value: ',this.value);
    this.ngZone.run(() => {
      console.log(id);
      let draw = SVG(this.elementRef.nativeElement).size(100, 10)
      draw.rect(10*this.value,10)
      .radius(4)
      .fill('#3db8db')  
    });
  }

} 



从'@angular/core'导入{Component，OnInit，Input，NgZone，ElementRef}；
从“@swimlane/ngx datatable/release/utils”导入{id}”；
@组成部分({
选择器：“应用程序svg”，
模板：``，
样式：[]
})
导出类SVGComponent实现OnInit{
@输入（）值：数字；
@Input（）索引：数字；
构造函数（public ngZone:ngZone，public elementRef:elementRef）{}
恩戈尼尼特（）{
this.drawSVG（）
}
drawSVG（）{
设id='bar-'+this.index；
//console.log（'id:'，id）；
//console.log（'value:'，this.value）；
此.ngZone.run（（）=>{
console.log（id）；
让draw=SVG（this.elementRef.nativeElement）.size（100,10）
draw.rect（10*this.value，10）
.半径（4）
.fill（“#3db8db”）
});
}
} 



NgZone
只是为了确保angular将呈现对第三方库的更改。
Sooo..有什么问题吗？这将创建SVG，所有SVG都具有相同的ID，这似乎不正确这里有什么问题？每个或draw.rect（值，10）需要不同的ID函数正在为所有十个元素分配相同的值？创建了十个
实例，但所有十个SVG都是在第一个元素中绘制的。因此，我想知道如何生成唯一的ID，或者是否可以使用某种封装。Sooo..有什么问题吗？这将创建SVG，所有SVG都具有相同的ID，但没有这里的问题是什么？每个或draw.rect（值，10）需要不同的ID函数正在为所有十个元素分配相同的值？创建了十个
实例，但所有十个SVG都是在第一个元素中绘制的。因此，我想知道如何生成唯一的ID，或者是否有某种可以使用的封装。这是我最初关于如何实现它的想法，但没有起作用。我已经充实了一个plnkr显示问题。问题可能是因为
drawSvg
在索引作为@Input by Angular传入之前被调用，这意味着您的SVG函数可能无法找到SVG。此外，您的plnkr出现以下错误：
error TypeError:Cannot read property'nodeName'of null
。您甚至可能不需要ID；可以使用elementRef.正在为您解决问题。更新答案。干杯！@camaron刚刚到达那里。非常感谢您的帮助！这是我最初关于如何实现它的想法，但没有起作用。我已经充实了一个plnkr来显示问题。问题可能是因为
drawSvg
在索引作为@Input by Angular传入之前被调用，这意味着ns您的SVG函数可能无法找到SVG。此外，您的plnkr出现以下错误：
错误类型错误：无法读取null的属性“nodeName”
。您甚至可能不需要ID；可以使用elementRef。为您解决问题。更新答案。干杯！@camaron刚刚到达。非常感谢您的帮助！也许是我的问题考虑到从提出此问题到今天的时间间隔，on是不相关的，但由于存在安全风险，不建议使用.nativeElement访问DOM元素？@user6860460建议不要绕过DomSanitizer。例如，当有人想要呈现一个包含html的变量时，不要他们必须绕过DomSanitizer来渲染那个

import { Component, OnInit, Input, NgZone, ElementRef } from '@angular/core';
import { id } from "@swimlane/ngx-datatable/release/utils";

@Component({
  selector: 'app-svg',
  template: `<div id="bar-{{index}}"></div>`,
  styles: []
})
export class SVGComponent implements OnInit {

  @Input() value: number;
  @Input() index: number;

  constructor(public ngZone: NgZone, public elementRef: ElementRef) {}

  ngOnInit() {
    this.drawSVG()
  }

  drawSVG() {
    let id = 'bar-' + this.index;
    // console.log('id: ',id);
    // console.log('value: ',this.value);
    this.ngZone.run(() => {
      console.log(id);
      let draw = SVG(this.elementRef.nativeElement).size(100, 10)
      draw.rect(10*this.value,10)
      .radius(4)
      .fill('#3db8db')  
    });
  }

}