GetElementById仅第一次起作用

Question

我正在使用离子2，并尝试在

上使用 getElementbyId

 <ion-content padding>    
   <ion-list id="list"></ion-list>    
 </ion-content>

，我可以以以下方式添加项目：

var listIon=document.getElementById("list");    
var li = document.createElement("ion-item");    
li.innerText=usern+": "+mensaje;    
var p = document.createElement("p");    
p.appendChild(li);    
listIon.appendChild(p);

第一次工作完全很好，但是如果我退出页面并重新打开它，我会发现一个错误，说

无法在null上读取属性附录

。我已经阅读了其他问题，他们说脚本不在底部。通过算数，在离子中，您根本不将脚本放入html中，我根本不知道会导致这一点。

编辑

我上传了此处的文件主要问题是在聊天中，聊天范围是从聊天打开的。

Answer 1

您到底想做什么？我认为您正在思考旧的jQuery Way ，但是Ionic在Angular2之上工作，所以事情以不同的方式完成。

我假设您想将新项目附加到列表中，可以使用 *ngfor和一系列数据来完成。或者，如果您想在某些条件下显示一条消息，则可以使用 *ngif来实现这一目标。您应该尝试避免直接引用DOM，然后更新组件代码以更改视图中显示的数据。

我创建了这个演示plunker，只是为了向您展示如何以A angular2 Way 来做这些事情。请让我知道预期的结果是什么，所以我可以相应地更新plunker。

组件代码：

@Component({
  selector: 'page-home',
  templateUrl: 'app/home.page.html'
})
export class HomePage {
  private count: number;
  public users: Array<string>;
  public showMessage: boolean;
  public message: string;
  constructor() {
    this.count = 1;
    this.users = [];
    this.showMessage = false;
    this.message = 'This is a secret message!';
  }
  public addUser(): void {
    this.users.push(`User ${this.count++}`);
  }
  public toggleMessage(): void {
    this.showMessage = !this.showMessage;
  }
}

查看代码：

<ion-header>
  <ion-navbar>
    <ion-title>HomePage</ion-title>
  </ion-navbar>
</ion-header>
<ion-content padding>
  <h2>Users</h2>
  <p *ngIf="showMessage">{{ message }}</p>
  <ion-list *ngFor="let user of users">
    <ion-item>
      <p>{{ user }}</p>
    </ion-item>
  </ion-list>
  <button ion-button (click)="addUser()">Add a user</button>
  <button ion-button (click)="toggleMessage()">Togle message</button>
</ion-content>