已解决：如何在angular // ionic中的click事件中引入带索引的id

oo7oh9g9 于 2022-12-16 发布在 Ionic

关注(0)|答案(1)|浏览(135)

我正在用ionic开发一个apk，在我的例子中，我需要发送一个带有索引的id的标签值。我需要在click事件中发送带有索引的id，以了解哪个元素在ngFor中触发了这个事件。

<ion-row *ngFor="let item of lines; let i= index" [value]="item" >
    <ion-col>         
        <ion-row>      
          <ion-col size="3" class="centered">
            <ion-item class="ion-no-padding">    
              <ion-input type="number" id="{{'cant_'+i}}" class="font_mini centered alignright" (input)="onChangeCantidad(i, $event.target.value)"></ion-input>
            </ion-item>
          </ion-col>
          <ion-col size="1" class="centered">
              <ion-checkbox id="{{'checkboxLine_'+i}}" checked="false" (click)="checkEvent($event, item, i, [{{'cant_'+i}}].value)"></ion-checkbox>
          </ion-col>
        </ion-row>
    </ion-col>
  </ion-row>

由于checkevent的click事件，上面的代码向我发送了错误。
有一些方法可以在click事件中包含[{{'cant_'+ i}}].value，对我来说，管理每个元素中的索引非常重要。

编辑：

NgModel模型是保存每个索引值的好方法，但我的问题是如何获得具有特定索引的标记的特定引用，例如对于输入，我想获得他的占位符，但引用#是通用的，当需要时我无法匹配确切的索引。

解决方案：

感谢@Eliseo的解释，我已经解决了我的问题：

要访问值并动态更改它，使用NgModel会更容易
要访问ngFor中元素的其他属性，我必须在ts中使用以下代码（在本例中，我需要的属性位于标记的son中）：

let element = document.getElementById('cantidadLine_'+index).getElementsByTagName('input')[0];

 let content = element.getAttribute("placeholder"));

编辑：
此外[（ngModel）]给我带来了一些问题，因为当我按下某个键时，值不会更新，第一次我的listCant[i]的值是未定义的。由于这个原因，我必须使用以下解决方案来解决这个问题：
[ngModel]=“铁路超高列表[i]”（ngModel变化）=“重复变化（索引，$事件）”
源代码：Default value of select when ngModel is undefined
谢谢。TY @Eliseo

ionic-framework

来源：https://stackoverflow.com/questions/73202565/solved-how-introduce-an-id-with-index-inside-a-click-event-in-angular-ionic

1条答案

按热度按时间

yr9zkbsy1#

当使用（event）=“what-ever”时，引号内不使用插值
但类似于：

//WRONG
(click)="checkEvent($event, item, i, this['cant_'+i].value)

字符串
询问.ts中的变量“cant_#”
你可以使用一个模板引用变量，不用担心“作用域”

<ion-row *ngFor="let item of lines; let i= index" [value]="item" >
    ...
              <!--see the "#cantID"-->
              <!--that you use also as argument to the function-->
              <ion-input #cantID type="number" id="{{'cant_'+i}}" 
class="font_mini centered alignright" 
                   (input)="onChangeCantidad(i, cantID.value)"></ion-input>
            ...

              <!--that you use also as argument to the function-->
              <ion-checkbox id="{{'checkboxLine_'+i}}" checked="false" 
                 (click)="checkEvent($event, item, i, cantID.value)">
              </ion-checkbox>
          ...
  </ion-row>

顺便说一句：为什么不使用(ngModel)(https://angular.io/api/forms/NgModel)呢？Angular是为了简化.ts和.html中变量之间的绑定

更新澄清：

当你在函数中使用模板引用变量作为参数时，.html会给予你“htmlElement”（我不太确定在ionic中是给“htmlElement”还是给ElementRef，你需要在函数el.nativeElement中使用）.当模板引用变量在一个循环中时，你不需要注意：Angular有一个“范围”，知道你传递的元素。
例如

(click)="checkEvent($event, item, i, cantID)"

checkEvent(event:any,item:any,index:number,el:HTMLElement)
{
   console.log(el.value,el.getAttributte('placeholder')
}

注意：当我说我不太确定ElementRef是否在离子传递中时，我想说

checkEvent(event:any,item:any,index:number,el:ElementRef)
{
   console.log(el.nativeElement.value,el.nativeElement.getAttributte('placeholder')
}

赞(0）回复(0）举报 2022-12-16

我来回答

已解决：如何在angular // ionic中的click事件中引入带索引的id

1条答案

相关问题

热门标签

最新问答