使用angula2数据绑定的html属性出错

时间:2017-03-24 23:59:20

标签: angular typescript

我需要带有索引值的html属性中的#符号来触发数据目标功能,我将索引值作为每个项目的ID,但不显示带有id的#符号来触发数据目标。

这是我的代码

EVAL

我需要一个#符号

use Test;

module Foo {
    sub this-exists    is export { say "This exists"; return 1 }
    sub this-is-a-stub is export { !!! }
    sub this-is-a-todo is export { ... }
    sub not-exported             { say "Not exported" }
    }

import Foo;  # https://github.com/perl6/doc/issues/359

# Is the class there?
 ok ::("Foo") !~~ Failure, "module Foo is defined";
 ok ::("Bar") ~~ Failure, "module Bar is not defined";

# this should work, but note the first one compiles because it works.
# if the routine isn't there, the &some-name is a compilation error.
 ok &this-exists,   "this-exists is there";
 ok &("not-there"), "this-exists is there";

# these are exported but they aren't "defined" because they
# are stubs. How is this supposed to work?
dies-ok { EVAL Q/&this-is-a-stub/ }, "this-is-a-stub is not defined";
nok &("this-is-a-stub"), "this-is-a-stub is not defined";
nok &("this-is-a-todo"), "this-is-a-todo is not defined";

# these shouldn't be defined here
dies-ok { EVAL Q/ &not-exported / }, "not-exported is not defined";
dies-ok { EVAL Q/ &not-there /    }, "not-there is not defined";

done-testing();
像这样

<span class="li-items" *ngFor="let item of menuData; let i = index;">
    <span  class="dropdown-toggle single-item" data-toggle="collapse" [attr.data-target]="i" *ngIf="item.name == 'Events' ">
         <a class="li-event">{{item.name}}  ({{item.data.length}})<span class="b-caret"></span></a>
    </span>
    <span class="inner-block collapse" [attr.id]="i">
        <span></span>
    </span>
</span>

1 个答案:

答案 0 :(得分:1)

使用函数实现此操作或插值

<span  class="dropdown-toggle single-item" data-toggle="collapse" [attr.data-target]="combineText(i)" *ngIf="item.name == 'Events' ">

combineText(i){
   return '#' + i;
}

或者你可以使用插值

<span  class="dropdown-toggle single-item" data-toggle="collapse" data-target="{{'#'.concat(i.toString())}}" *ngIf="item.name == 'Events' ">