Angular5 删除或添加角度5+；后如何更改视图；？

我正在构建天气应用程序，我使用angular 5作为前端框架，本地存储作为存储。 我正在将城市名称从输入字段保存到本地存储器。这里的主要问题是，当我保存城市名称时，我想更改我的视图，即我想隐藏输入字段并显示我先前保存的城市名称。 我的下一个功能是从本地存储器中删除城市名称。在这种情况下，我还想更改我的视图，即我想隐藏城市名称并显示输入字段。这是我的密码

settings.component.html

---

将*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>

{{cityName}

我在添加cityname时尝试了及其工作方式，但在尝试删除cityname时其不工作。您必须在

removeCity（）{this.cityname=''；localStorage.removeItem（“City”）；}中设置cityname

<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>