Как изменить вид после удаления или добавления в угловой 5+?

Question

Я создаю приложение погоды и использую Angular 5 в качестве основы веб-интерфейса и локальное хранилище в качестве хранилища.Я сохраняю название города из поля ввода в локальном хранилище.Основная проблема заключается в том, что когда я сохраняю название города, я хочу изменить свой вид, т.е. я хочу скрыть поле ввода и показать название города, которое я сохранил ранее.И следующая функция, которую я имею, это удалить название города из локального хранилища.В этом случае я также хочу изменить свой вид, т.е. я хочу скрыть название города и показать поле ввода.Вот мой код

settings.component.html

<div class="row">
  <div class="col-md-6 col-xl-8 mt-4 col-center">
    <div class="card">
      <div class="card-body">
        <h3 class="text-center pt-2 pb-2">Setttings</h3>
        <hr>
        <div class="setting-menu">
          <span class="setting-items">
            <h5>Add Your City</h5>
          </span>
          <div *ngIf="storedCity" class="localstorage" #cityDiv>
            <div class="storedCity">
              <span> {{storedCity | uppercase}} </span>
            </div>
            <div class="remove-city mt-4">
              <span class="remove-icon ml-5">
                <i class="fa fa-times" aria-hidden="true" (click)="removeCity()" ></i>
              </span>
            </div>
          </div>

          <div class="clearfix"></div>
          <div *ngIf="!storedCity" class="city-input pt-4" #inputDiv>
            <form action="">
              <div class="form-group">
                <input type="text" [(ngModel)]="cityName" name="cityName" value={{cityName}} id="cityName" class="form-control" placeholder="Add City ......">
              </div>
              <div class="form-group">
                <button class="btn btn-success add-btn" (click)="update()">Add</button>
              </div>
            </form>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

settings.component.ts

import { Component, OnInit, ViewChild } from '@angular/core';

@Component({
  selector: 'app-settings',
  templateUrl: './settings.component.html',
  styleUrls: ['./settings.component.scss']
})
export class SettingsComponent implements OnInit {

  @ViewChild('cityDiv') cityDiv;
  @ViewChild('inputDiv') inputDiv;


  public cityName: string;
  public storedCity = localStorage.getItem("City");

  constructor() { 
    this.cityName = '';
  }

  ngOnInit() {

  }

  update() {
    localStorage.setItem("City", this.cityName);
    this.cityName = '';
  }
  removeCity() {
    localStorage.removeItem("City");
  }

}

Answer 1

Добавьте * ngIf к входу, скрывая его, когда установлено значение

<input *ngIf='!cityName; else citySet' type="text" [(ngModel)]="cityName" name="cityName" value={{cityName}} id="cityName" class="form-control" placeholder="Add City ......">

, а в противном случае просто отобразите значение

<ng-template #citySet>{{cityName}}</ng-template>