Блог

Я довольно новичок в 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));
    });
}
  

Итак, при добавлении новых данных подписчик обновляет новый список, и я бы хотел, чтобы мой новый узел был выбран автоматически.
Большое спасибо, любая помощь будет оценена.