Question

使用Angular2，我的html文件中有一个下拉菜单，如下所示（我使用Ink作为我的CSS框架）：

    <li class="submenu">
      <a href="#">Role in the Organization</a>
        <ul class="dropdown">
          <div *ngFor="let currentRole of getUniqueRoles(members)">
            <li>
              <a (click)="changeFilterStrings('role', currentRole)">
                {{currentRole}}
              </a>
            </li>
          </div>
        </ul>
    </li>

我能够确认成员是否正常工作，因为同一模板中的其他html下游工作。

问题（我认为）是异步检索成员数组。似乎像*ngFor="let currentRole of getUniqueRoles(members) | async"这样的东西似乎不起作用。我很乐意欢迎建议！我从类似的问题中猜测管道是答案，但如果我想通过成员的属性进行过滤，我不太确定如何实现。

目前，下拉列表中没有显示任何内容。为了澄清，我看到了组织中的角色＆＃34;选项，但它自己的下拉列表填充了一个空白矩形。＆＃34;

同一组件的打字稿，供参考：

getUniqueRoles(members: Member[]){
    var flags = [], output = [], l = members.length, i;
    for( i=0; i<l; i++) {
      if( flags[members[i].role]) continue;
      flags[members[i].role] = true;
      output.push(members[i].role);
    }
    return output;
  }

我的会员模特：

export class Member {
  public dateCreated: Date = new Date();
  public TWITTERPOPULATION: number = 328000000; // TODO figure of how to globally access this as a const
  public TOTALWORLDWEALTH: number = 60000000000;
  public influenceQuotient: number;

  constructor(public firstName: string, public lastName: string, public illuminatiNickname: string, public sectorOfInfluence: string, public numberOfTwitterFollowers: number, public netWorth: number, public politicalImpactQuotient: number, public suspicionOfIlluminatiMembership: number, public role: string, public salientDetails: string, public imgURL: string, public imgAlt: string) {
    this.influenceQuotient = numberOfTwitterFollowers/this.TWITTERPOPULATION + netWorth/this.TOTALWORLDWEALTH + politicalImpactQuotient - suspicionOfIlluminatiMembership;
  }
}

members []只是一个Member对象数组（但是从fireBase获取）。

使用Angular2在下拉菜单中显示UNIQUE选项，使用从firebase

0 个答案: