refresh - Angular View 不会在数组推送时刷新
问题描述
我对离子和角度非常陌生。无论如何,我正在尝试按照教程使用 ionic4 https://www.joshmorony.com/building-a-notepad-application-from-scratch-with-ionic/创建笔记应用程序。
所以,我遵照指示。一切都很好,只是当我添加新笔记时视图没有更新。代码如下:
备注服务:
import { Injectable } from '@angular/core';
import { Storage } from '@ionic/storage';
import { Note } from '../interfaces/note';
@Injectable({
providedIn: 'root'
})
export class NotesService {
public notes: Note[] = [];
public loaded: boolean = false;
constructor(private storage: Storage) {
}
load(): Promise<boolean> {
// Return a promise so that we know when this operation has completed
return new Promise((resolve) => {
// Get the notes that were saved into storage
this.storage.get('notes').then((notes) => {
// Only set this.notes to the returned value if there were values stored
if (notes != null) {
this.notes = notes;
}
// This allows us to check if the data has been loaded in or not
this.loaded = true;
resolve(true);
});
});
}
save(): void {
// Save the current array of notes to storage
this.storage.set('notes', this.notes);
}
getNote(id): Note {
// Return the note that has an id matching the id passed in
return this.notes.find(note => note.id === id);
}
createNote(title): Promise<boolean> {
return new Promise((resolve) => {
// Create a unique id that is one larger than the current largest id
let id = Math.max(...this.notes.map(note => parseInt(note.id)), 0) + 1;
this.notes.push({
id: id.toString(),
title: title,
content: ''
});
this.save();
console.log('Service Log ' + this.notes);
resolve(true);
});
}
}
HTML 代码:
<ion-header>
<ion-toolbar color="primary">
<ion-title>Notes</ion-title>
<ion-buttons slot="end">
<ion-button (click)="addNote()">
<ion-icon slot="icon-only" name="clipboard"></ion-icon>
</ion-button>
</ion-buttons>
</ion-toolbar>
</ion-header>
<ion-content>
<ion-list>
<ion-item button detail *ngFor="let note of notesService.notes" [href]="'/notes/' + note.id" routerDirection="forward">
<ion-label>{{ note.title }}</ion-label>
</ion-item>
</ion-list>
</ion-content>
解决方案
我遵循了相同的教程并遇到了同样的问题。这个问题是因为一个非常有趣和强大的东西叫做Zones。
这个想法是,您需要通过执行以下操作让 Angular 知道带有注释的数组已更改:
// Angular
import { Component, NgZone } from '@angular/core';
// Ionic
import { NavController, AlertController } from '@ionic/angular';
// Services
import { NotesService } from '../services/notes.service';
import { AlertOptions } from '@ionic/core';
@Component({
selector: 'app-home',
templateUrl: 'home.page.html',
styleUrls: ['home.page.scss'],
})
export class HomePage {
constructor(
private ngZone: NgZone, // Add this in the constructor
private navCtrl: NavController,
private alertCtrl: AlertController,
private notesService: NotesService,
) { }
ngOnInit() {
this.notesService.load();
}
addNote() {
const alertOptions: AlertOptions = {
header: 'New Note',
message: 'What should the title of this note be?',
inputs: [
{
type: 'text',
name: 'title'
}
],
buttons: [
{
text: 'Cancel'
},
{
text: 'Save',
handler: (data) => {
// Create the note inside a Zone so that Angular knows
// that something has changed and the view should be updated
this.ngZone.run(() => {
this.notesService.createNote(data.title);
});
}
}
]
};
this.alertCtrl
.create(alertOptions)
.then((alert) => {
alert.present();
});
}
}
推荐阅读
- android - kotlin 缺少 GoogleMap 的方法
- jquery - 在单击 jquery 时将背景图像设置为名称属性不起作用
- json - 为什么从对象“从不”检索函数的参数
- azure - Azure 函数,Blob 触发器:将数据文件从 Blob 复制到服务器
- android - 在发布版本中启用 R8 后移动应用程序崩溃
- oracle - 甲骨文 | 使用正则表达式导出的 XML 数据
- c# - .NET 核心中的 MD5 哈希是确定性的吗?
- batch-file - 在 Windows 10 上获取当前分辨率的批处理文件
- vue.js - Vuejs在v-model为空时隐藏一个div
- apache - 从 Apache Druid 删除列