Question

你好，我有一个双标签列表，我想获得右侧<li>标签的值。我需要数组中的值或字符串。

我尝试使用[(ngModel)]为每个<li>标记但我收到错误

没有价值附件

我该如何解决这个问题？

HTML

<div class="col-md-12"  style="margin-top:40px; padding-left:0!important;" >
       <div class="dual-list list-left col-md-5">
          <div class="well listDual">
             <h4 class="text-center"><b>Tagliste</b></h4>
             <hr/>
             <ul class="list-group ul" >
                <li class="list-group-item" *ngFor="let x of dataTagListSorted;"> </li>
             </ul>
          </div>
       </div>
       <div class="list-arrows col-md-1 text-center">
          <button class="btn btn-default btn-sm move-left">
          <span class="glyphicon glyphicon-chevron-left"></span>
          </button>
          <button class="btn btn-default btn-sm move-right" >
          <span class="glyphicon glyphicon-chevron-right" ></span>
          </button>
       </div>
       <div class="dual-list list-right col-md-5">
          <div class="well listDual">
             <h4 class="text-center"><b>Tags</b></h4>
             <hr/>
             <ul class="list-group ul">
       //This is my taglist on the right side
             </ul>
          </div>
       </div>
    </div>

JQUERY

 $('body').one('click', '.list-group .list-group-item', function() {
    $(this).toggleClass('active');
});

$('body').one('click', '.move-left', function() {
    let actives = $('.list-right ul li.active');
    actives.clone().prependTo('.list-left ul');



    actives.remove();
});
$('body').one('click', '.move-right', function() {

            let actives = $('.list-left ul li.active');
            actives.clone().appendTo('.list-right ul');

            actives.remove();

Answer 1

不要使用Jquery。在*ngFor中使用li。 *ngFor将从Component中的数组绑定。如果您需要通过事件点击获得价值，请使用(click)="myFct(item)"。

<强> HTML

 <ul class="list-group ul">
           <li class="list-item-group" *ngFor="let item of myArray" (click)="myFct(item)>{{item}}</li>
    </ul>

角度组件

export class HomeComponent implements OnInit {

    public myArray: Array<any>;

    constructor() {};

    ngOnInit() { 
        myArray = [1,2,3]
    }

   myFct(item){
        console.log(item)
   }
}

Answer 2

这是代码

 <ul class="list-group ul">
    <li class="list-group-item" *ngFor="let x of dataTagListSorted;let i = index;">
        <input [(ngModel)]="dataTagListSorted[i]" type="text" />
    </li>
 </ul>

当您使用ngFor时，Angular不会创建新变量，因此您无法将x绑定到ngModel。这就是你必须使用索引和数组的原因。

您也可以对其他列表执行相同操作。

编辑如果您想管理点击次数：

 <ul class="list-group ul">
    <li class="list-group-item" *ngFor="let x of dataTagListSorted;let i = index;">
        <button (click)="getValue(x, i)">{{x}}</button>
    </li>
 </ul>

并在您的Component TS文件中：

getValue(x, index): void {
    console.log(x);
    console.log(this.dataTagListSorted[index]);
}

两个日志都会为您提供价值。

编辑2 如果要将列表中的一个项目切换到另一个项目，请执行此操作。

对于您的清单：

 <ul class="list-group ul">
    <li class="list-group-item" *ngFor="let x of leftList;let i = index;">
        <button (click)="sendToRight(x, i)">{{x}}</button>
    </li>
 </ul>

 <ul class="list-group ul">
    <li class="list-group-item" *ngFor="let x of rightList;let i = index;">
        <button (click)="sendToLeft(x, i)">{{x}}</button>
    </li>
 </ul>

在你的组件中：

sendToRight(x, i) {
    this.leftList.splice(i, 1);
    this.rightList.push(x);
}

sendToLeft(x, i) {
    this.rightList.splice(i, 1);
    this.leftList.push(x);
}

Angular2获取<ul> <li>值

2 个答案: