时间戳

首页 > 解决方案 > 角度：将元素添加到列表并以图形方式选择它

angular - 角度：将元素添加到列表并以图形方式选择它

问题描述

我在角度方面很新：我试图制作一个元素列表，并在选择它们时显示详细信息。也可以添加一个元素，我想在创建这个新元素并将其插入新列表时默认选择它。

这是我的代码：

  <td style='vertical-align: top;padding-left: 20px;'>
      <div id="heroes">
      <h2 id="myHeroes">Network Map</h2>
          <ul class="heroes">
              <li (click)="onSelectNewNetworkMap()" [class.active]>
                  <span class='icon'> <mat-icon [inline]="true" >add</mat-icon></span>   ADD 
              </li>
              <li *ngFor="let hero of data"
                  (click)="onSelect(hero)"
                  [class.active]="hero === selectedHero">
                  <span class= "{{getFlag(hero.MarketNameHidden)}}"> </span> {{hero.CounterpartyCode}}
              </li>
          </ul>
      </div>
  </td>

CSS：

li {
    margin: .5em;
    padding: .8em;
    border: 1px gray solid;
    border-radius: .25em;
    background-color: whitesmoke;
}

li:hover, li.active {
    background-color: gray;
    color: white;
}

ts：

public constructor(private service: MessagesService, private dialog: MatDialog) {
    this.subscription = this.service.map.subscribe((value) => {
        this.data = value.sort((a, b) => a.MarketName.localeCompare(b.MarketName));
    });
}

因此，当添加新数据时，订阅者会更新新列表，我希望我的新节点会被自动选择。非常感谢，任何帮助将不胜感激。

标签： angulartypescript

解决方案

推荐阅读