我怎样才能得到li-Element in“Angular2 for TypeScript” （测试版）添加特定的CSS类？ [英] How can I get the li-Element in "Angular2 for TypeScript" (beta) for adding specific CSS class?

问题描述

在我的Angular2项目中，我试图通过在Google中显示结果框来实现搜索框。这就是我得到的，它的工作原理，但不幸的是，当你搜索一些东西，然后按下key down或key up，结果框中的搜索结果就不会像Google那样突出显示。

这是我的代码：

 < input type =searchclass =form-control> 
 
 // resultbox 
< div> 
< ul> 
< li * ngFor =＃item of items> {{item.text}}< / li> 
< / ul> 
< / div> 
  

注意：items是搜索结果列表，它起作用！结果终于出现了。

我知道你可以在< input> ）函数，但它应该如何在结果列表中标记特定的li元素？
我的想法就像是一个指数计数器。当索引计数器为3时，第三个li元素应该添加类searchIndex，它给出li元素的新颜色。

但是我不知道我该怎么做。你有解决方案如何做到这一点？还是哟有更好的解决方案来解决这个问题？

我希望你能帮助我。

解决方案

< input（keyup）=selected--（keydown）=selected ++>

< div>
< ul>
< li * ngFor =＃item of items;＃i = index[class.selected] =i == selected> {{item.text}}< / li>
< / ul>
< / div>


您需要针对选择< 0 或选择> = numResult 但是，当您使用事件处理函数而不是内联时应该很容易。 / ++ 。我猜你明白了。

更新（回答评论中的问题）

只是一个小问题：当我将鼠标悬停在列表上时，您是否知道如何删除选定css属性？我希望它像谷歌：当你使用keyUp和keyDown比索引被标记。但是当你将鼠标悬停在它上面时，应该删除所选内容，并且只有鼠标悬停才能激活

 < DIV> 
 （mouseout）=mouseover = false> 
< li * ngFor =＃item of items;＃i = index
 [class.selected] =i == selected&&！mouseover> {{item.text }}< /锂> 
< / ul> 
< / div> 
  

将此字段添加到组件中

  mouseover：boolean = false; 
  

In my Angular2 project I'm trying to implement a searchbox with a resultbox appearing like in Google. That's what I got and it works, but unfortunately when you search something and you press "key down" or "key up" the search result in the resultbox are not highlighting like in Google.

That's my code:

<input type="search" class="form-control">

// resultbox
<div>
   <ul>
     <li *ngFor="#item of items">{{ item.text }}</li>
   </ul>
</div>

Note: "items" is the search result list, which works! The results are finally showing up.

I know you can put in "<input>" a (keyup) function, but how should it mark the specific li-element in the resultbox list? My idea was something like a index counter. When the index counter is for example 3, then the third li-element should be added with the class "searchIndex", which gives the li-element new color.

But I have no idea how I should do that. Do you have a solution how to do that? Or do yo have a better solution to solve that?

I hope you can help me.

解决方案

<input (keyup)="selected--" (keydown)="selected++">

<div>
   <ul>
     <li *ngFor="#item of items; #i=index" [class.selected]="i == selected">{{ item.text }}</li>
   </ul>
</div>

You need some special handling for selected < 0 or selected >= numResult but that should be easy when you use an event handler function instead of inline --/++. I guess you get the idea.

Update (to answer a question from the comment)

Just a little question: When I hover the mouse over the list, do you know how to remove the "selected" css property? I want it like in Google: When you use the keyUp and keyDown than the index is marked. But when you hover the mouse over it, than the selected should be removed and only the hover from the mouse should be active

<div>
   <ul (mouseover)="mouseover=true"
       (mouseout)="mouseover=false">
     <li *ngFor="#item of items; #i=index" 
         [class.selected]="i == selected && !mouseover">{{ item.text }}</li>
   </ul>
</div>

Add this field to the component

mouseover:boolean = false;

这篇关于我怎样才能得到li-Element in“Angular2 for TypeScript” （测试版）添加特定的CSS类？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！