如何在Angular中使用twilo API显示和加入所有频道

Question

我正在使用twilio api和angular创建一个聊天Web应用程序。当前我可以搜索频道并加入该特定频道。我也可以在列表中显示所有频道，但是我想如何在点击时加入频道正在显示所有频道。

打字稿代码

 //Search Channel
 channel: string = "";
 foundChannel = "general";
 channelArray: any = [];
 foundChannelId = "";
 arrayLen;
 searchChannel() {
 this.chatBox.searchChannel().subscribe(res => {

  for (let index = 0; index < res.channels.length; index++) {
    this.channelArray.push(res.channels[index].unique_name)
    this.arrayLen = this.channelArray.length;
    for (let index = 0; index < this.arrayLen; index++) {
      if (this.channelArray[index] == this.channel) {
        this.foundChannel = this.channel;
        this.foundChannelId = res.channels[index].sid;
        break;
      }
      else {
        this.foundChannel = "channel not found";
      }
    }
  }
},
  err => {
    console.log();
  })
}

 //joining a new channel
joinChannel() {
console.log(this.foundChannelId);
this.chatBox.getChannelId(this.foundChannelId);
this.viewMessage();
this.chatBox.joinChannel(this.foundChannelId).subscribe(res => {
  console.log(res);
}, err => {
  console.log(err);
})
}

//display all channel
length;
channelArr = [];
Display() {
this.chatBox.DisplayAllChannel().subscribe(res => {
  console.log(res.channels.length)
  this.length = res.channels.length;
  for (let i = 0; i < this.length; i++) {
    this.channelArr[i] = res.channels[i].unique_name;
  }
}),
  err => {
    console.log(err);
  }
}

。服务代码

//joining a channel
 joinChannel(channelId):Observable<any>{

return this.http.post("https://chat.twilio.com/v2/Services
/"+this.serviceId+"/Channels/"+channelId+"/Members"
,"ChannelSid="+channelId+"&Identity="+this.identity+
"&ServiceSid="+this.serviceId,this.httpOpt); 
 }

HTML代码

     <ul class="nav nav-pills nav-stacked">
    <li>Your channel:{{foundChannel}}</li>
      <li><input type="text"  class="form-control" placeholder="Enter new 
Channel name" [(ngModel)]="channelName"/>
        <button type="button" class="btn btn-primary" 
(click)="addChannel()">Click to create Channel</button></li>
         <li> <input  class="form-control" type="text" placeholder="Search 
channel" [(ngModel)]="channel">
        <button class="btn btn-default" (click)="searchChannel()"><i 
class="glyphicon glyphicon-search"></i></button>
        <button (click)="joinChannel()" class="btn btn-primary">Join 
{{foundChannel}}</button><br/></li>
    </ul>
    <button id="createService" type="button" (click)="addService()" 
class="btn btn-primary">Click to create serveice</button>

    <button (click)="Display()" class="btn btn-primary">Display</button>
    <ul *ngFor="let displayChannel of channelArr">
      <li >
        <button  class="btn btn-primary">Join  {{displayChannel}} </button>
      </li>
    </ul>

我想在替换所有频道后点击按钮加入频道