Tengo un parámetro de URL gatewayId y quiero mostrar solo aquellos objetos cuya identificación coincida con el parámetro.
import { Component, OnInit } from '@angular/core'; import { Router } from '@angular/router'; @Component({ selector: 'app-message-receiver', templateUrl: './message-receiver.component.html', styleUrls: ['./message-receiver.component.scss'] }) export class MessageReceiverComponent implements OnInit { data: { message: string, gatewayId: number }[] = [ {message: "Message 1", gatewayId: 1}, {message: "Message 2", gatewayId: 2}, {message: "Message 3", gatewayId: 3}, {message: "Message 4", gatewayId: 1}, {message: "Message 5", gatewayId: 2}, {message: "Message 6", gatewayId: 3} ] <div> <div> <button mat-raised-button (click)="goToGateway()"> <span>←</span> </button> <button mat-raised-button (click)="sendMessage()" style="float: right;">Send message</button> </div> <ng-container *ngFor="let member of data"> <div> <ul> <li *ngIf="member.gatewayId === 1">{{member.message}}</li> </ul> </div> </ng-container> </div>(Aquí el filtro está codificado, así que no preste atención a eso).
Entonces, si la URL es */1, quiero mostrar solo los mensajes 1 y 4. Intenté hacerlo con ActivatedRoute y ngFor/ngIf, pero desafortunadamente no puedo hacerlo.
En tu componente.ts:
gatewayId:number; constructor(private route: ActivatedRoute) { } ngOnInit() { if(this.route.snapshot.params['id']) this.gatewayId = this.route.snapshot.params['id']; }En su componente.html:
<div> <div> <button mat-raised-button (click)="goToGateway()"> <span>←</span> </button> <button mat-raised-button (click)="sendMessage()" style="float: right;">Send message</button> </div> <ng-container *ngFor="let member of data"> <li *ngIf="member.gatewayId === gatewayId">{{member.message}}</li> </ng-container> </div>