Как выбрать определенные элементы из списка, чтобы я мог показать их в моем html моем angular компоненте?

Question

я пытаюсь показать определенные элементы списка, который у меня есть в базе данных firebase, пытаясь сравнить URL-адрес, который я генерирую в пути, и атрибут, который имеет элемент (индекс). Все это в Angular.

Это мой код .ts:

import { Component, OnInit } from '@angular/core';
import { ConexionService } from 'src/app/services/conexion.service';
import { Router } from '@angular/router'
import { from } from 'rxjs';

@Component({
  template: 'The href is: {{href}}',
  selector: 'app-articulos',
  templateUrl: './articulos.component.html',
  styleUrls: ['./articulos.component.css']
})
export class ArticulosComponent implements OnInit {
  public href: string = "";

  menus: any;
  constructor(private conexion: ConexionService, private router: Router) { 
    this.conexion.menuLista().subscribe(menu => {
      this.menus = menu;
    })
  }

  ngOnInit(): void { 
    var r = (this.router.url).split("/");
    this.href = r[3];
    console.log(this.href);
  }
}

А это мой html (я знаю, что это очень просто, начинаю):

<h2> Menu : </h2>
<div  class="alert alert-warning" role="alert"  *ngFor="let articulo of menus">
  <div *ngIf="{{href}} == {{articulo.index}}">
    <h3>
      <a [title]="articulo.Nombre + ' Menu'">
        {{articulo.Nombre}}
        </a>
     </h3>
    <img src={{articulo.Url}} width="450" height="450"/>
  </div>  
 </div>

Очевидно, что код не работает, но я не знаю, как сравнить эти вещи, чтобы я мог показать элементы списка, которые имеют тот же индекс, что и путь. Примером может быть: route = / restaurant / articulos / 0, поэтому var r будет 0, а затем идея состоит в том, чтобы показать элементы, у которых есть атрибут index = "0"

Answer 1

Начнем с того, что вам не нужен оператор {{ }} в *ngIf="href == articulo.index"

Answer 2

Попробуйте следующее:

<h2> Menu : </h2>
<div  class="alert alert-warning" role="alert"  *ngFor="let articulo of menus">
    <p>{{href}}</p>
    <p>{{articulo.index}}</p>
    <div *ngIf="href === articulo.index">
        <h3>
            <a href="#" [title]="articulo.Nombre + ' Menu'">{{articulo.Nombre}}</a>
        </h3>
        <img [src]="articulo.Url" width="450" height="450"/>
     </div>  
 </div>