Javascript 如何在angular中使用twilo api显示和连接所有通道

我正在使用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); 
 }

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

//搜索频道
频道：string=“”；
foundChannel=“一般”；
channelArray:any=[]；
foundChannelId=“”；
阿莱伦；
搜索频道（）{
this.chatBox.searchChannel（）.subscribe（res=>{
for（让index=0；index{
console.log（）；
})
}
//加入新渠道
joinChannel（）{
console.log（this.foundChannelId）；
this.chatBox.getChannelId（this.foundChannelId）；
this.viewMessage（）；
this.chatBox.joinChannel（this.foundChannelId）.subscribe（res=>{
控制台日志（res）；
}，err=>{
控制台日志（err）；
})
}
//显示所有频道
长度；
channelArr=[]；
显示（）{
this.chatBox.DisplayAllChannel（）.subscribe（res=>{
console.log（res.channels.length）
this.length=res.channels.length；
for（设i=0；i{
控制台日志（err）；
}
}

服务代码

 //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); 
 }

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

//加入频道
joinChannel（channelId）：可观察{
返回此.http.post（“https://chat.twilio.com/v2/Services
/“+this.serviceId+”/Channels/“+channelId+”/Members”
，“ChannelSid=“+channelId+”&Identity=“+this.Identity+
“&ServiceSid=“+this.serviceId，this.httpOpt）；
}

Html代码

 //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); 
 }

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

您的频道：{{foundChannel}}

单击以创建频道

参加
{{foundChannel}}


单击以创建服务
展示


加入{{displayChannel}

我想在显示所有频道后点击按钮加入频道