Javascript getElementById仅在第一次工作时有效

我正在使用Ionic 2并尝试在上使用

getElementbyId

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

第一次它工作得非常好，但是如果我退出页面并重新打开它，我会得到一个错误，这样说

无法读取null上的属性appendChild

。我已经读过其他问题，他们说脚本不在底部。考虑到在爱奥尼亚，你根本没有把脚本放在html中，我不知道是什么导致了这种情况

编辑

---

我上传了文件，主要问题是聊天详情，聊天详情是从聊天室打开的。

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

我假设您想在列表中添加一个新项，这可以通过使用*ngFor和一个数据数组来完成。或者，如果您想在特定条件下显示消息，可以使用*ngIf来实现您应该尽量避免直接引用DOM，而是更新组件代码以更改视图中显示的数据。

我创建这个只是为了向你展示如何以一种有角度的方式做这些事情。请让我知道预期结果，以便我可以相应地更新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>

@组件({
选择器：“主页”，
templateUrl:'app/home.page.html'
})
导出类主页{
私人计数：数字；
公共用户：数组；
公共消息：布尔；
公共消息：字符串；
构造函数（）{
这个.count=1；
this.users=[]；
this.showMessage=false；
this.message='这是一条秘密消息！'；
}
public addUser（）：void{
this.users.push（`User${this.count++}`）；
}
public-toggleMessage（）：void{
this.showMessage=！this.showMessage；
}
}

查看代码：

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

主页
使用者
{{message}

{{user}}

添加用户
切换消息

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

我假设您想在列表中添加一个新项，这可以通过使用*ngFor和一个数据数组来完成。或者，如果您想在特定条件下显示消息，可以使用*ngIf来实现您应该尽量避免直接引用DOM，而是更新组件代码以更改视图中显示的数据。

我创建这个只是为了向你展示如何以一种有角度的方式做这些事情。请让我知道预期结果，以便我可以相应地更新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>

@组件({
选择器：“主页”，
templateUrl:'app/home.page.html'
})
导出类主页{
私人计数：数字；
公共用户：数组；
公共消息：布尔；
公共消息：字符串；
构造函数（）{
这个.count=1；
this.users=[]；
this.showMessage=false；
this.message='这是一条秘密消息！'；
}
public addUser（）：void{
this.users.push（`User${this.count++}`）；
}
public-toggleMessage（）：void{
this.showMessage=！this.showMessage；
}
}

查看代码：

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

主页
使用者
{{message}

{{user}}

添加用户
切换消息

当变量未正确初始化时，可能会出现此问题。哪一行中的apendChild为null？p、 儿童（李）；或列表。附加子项（p）？退出页面后如何重新打开页面？按后退按钮？请显示更多代码。需要包含call@OussamaBenGhorbel在列表中，当变量未正确初始化时，可能会发生此问题。空值上的apendChild在哪一行？p、 儿童（李）；或列表。附加子项（p）？退出页面后如何重新打开页面？按后退按钮？请显示更多代码。需要包含call@OussamaBenGhorbel在列表中，我尝试了您编写的内容，但是现在我遇到了错误“无法读取null的属性‘users’”。我想问题一定是我试图在一个数据库引用中解决这个问题，当添加了一个子项时，这个数据库引用被调用。在第53行你可以看到我添加了你发布的内容。我试着在一个单独的函数中也这样做，它只是说函数为空。好的，这是一个不同的错误，它与箭头函数有关。你可以阅读更多细节。不要执行

databaseRef.on（“添加了子对象”，函数（快照）{…}）

而使用箭头函数来保持

此

作为对组件的引用。这将是这样的

databaseRef.on（“child_added”，（snapshot）=>{//这里你可以使用相同的代码并且可以工作！}）

@sebasfereras太棒了！成功了！我将更深入地研究这个解决方案，以便更好地理解为什么它不起作用。谢谢！希望你能接受答案然后不@PabloGarcia@Sampath对不起，我有点新，忘记做了，谢谢提醒！我试过你写的东西，但是现在我得到了一个错误“不能读取null的属性‘users’”。我想问题一定是我试图在一个数据库引用中解决这个问题，当添加了一个子项时，这个数据库引用被调用。在第53行你可以看到我添加了你发布的内容。我试着在一个单独的函数中也这样做，它只是说函数为空。好的，这是一个不同的错误，它与箭头函数有关。你可以阅读更多细节。不要执行

databaseRef.on（“添加了子对象”，函数（快照）{…}）

而使用箭头函数来保持

此

作为对组件的引用。这将是这样的

databaseRef.on（“child_added”，（snapshot）=>{//这里你可以使用相同的代码并且可以工作！}）

@sebasfereras太棒了！T