Tengo este componente con una propiedad de cliente.
import { Component } from '@angular/core'; @Component({ selector: 'app-update-view', templateUrl: './update-view.component.html', styles: [ ] }) export class UpdateView { public client: string[] = ['client 1', 'client 2', 'client 3', 'client 4']; constructor() { } deleteClient() { this.client.pop(); } }En el html imprimo el objeto así.
<div class="col md:col-6"> <div> <strong>Client</strong> <pre>{{ Client }}</pre> </div> <button (click)="deleteClient()">Delete Client</button> </div>Sé que esta no es la forma de imprimir la matriz, debería usar 'ngFor e imprimir los elementos uno por uno, pero quiero saber si hay una forma de actualizar la matriz en el html después de eliminar un cliente porque sé cuándo haga clic en Eliminar cliente, la matriz en el html permanece igual.
Esta pregunta la hago por curiosidad, se que esta forma de imprimir arrays no es correcta pero quiero saber si hay alguna forma de actualizar la vista.
La respuesta directa a su pregunta es inyectar ChangeDetectionRef y llamar a markForCheck .
export class UpdateView { public client: string[] = ['client 1', 'client 2', 'client 3', 'client 4']; constructor(private cdr: ChangeDetectionRef) { } deleteClient() { this.client.pop(); this.cdr.markForCheck(); } } Pero la verdadera respuesta es averiguar por qué esto no se actualiza. El tipo de codificación que está haciendo se llama codificación "mutable". Así es como la gente codificaría en AngularJS. Mutar objetos y luego ejecutar la detección de cambios en esos objetos es la razón por la cual AngularJS tuvo un ciclo de detección de cambios tan lento. La forma en que funciona la detección de cambios de Angular es que solo ejecuta la detección de cambios en un objeto si la referencia al objeto (en este caso, una matriz) es una referencia a un objeto diferente. Como está llamando a pop , está apuntando a la misma matriz, por lo que es probable que Angular no ejecute CD en él.
El siguiente código le dará lo que quiere Y activará el CD de Angular. El siguiente código actualiza this.client para que sea una nueva matriz, que hará que la interfaz de usuario se actualice automáticamente.
// THIS IS THE RIGHT ANSWER!!! this.client = this.client.slice(0, -1);Al hacer esto, se está apoyando en la programación inmutable, lo que hace que la detección de cambios sea mucho más rápida y económica.
Intente usar json pipe y cambie <pre>{{ client | json }}</pre> en lugar de <pre>{{ Client }}</pre> .
<div class="col md:col-6"> <div> <strong>Client</strong> <pre>{{ client | json }}</pre> </div> <button (click)="deleteClient()">Delete Client</button> </div>