![](/img/trans.png)
[英]How to connect my backend with my frontend with angular2 and ionic2 using gridFs?
[英]How to show only one item in Angular2, Ionic2
請忍受我的問題,因為我是Angular的新手,我不知道確切的問題出在哪里,我嘗試過用google尋找解決方案,但沒有好運,基本上我正在運行帶有套接字的簡單NodeJS服務器.io:
服務器
var socket = require('socket.io'),
http = require('http'),
server = http.createServer(),
socket = socket.listen(server);
var msgProva = 2;
socket.on('connection', function(connection) {
console.log('User Connected');
socket.emit('prova', msgProva);
connection.on('message', function(msg){
socket.emit('message', msg);
});
connection.on('sValue', function(value){
console.log('sValue', value );
socket.emit('sValue', value);
});
});
server.listen(3000, function(){
console.log('Server started');
});
和我的客戶TS代碼: HOME.TS
import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import * as io from 'socket.io-client';
@Component({
selector: 'page-home',
templateUrl: 'home.html'
})
export class HomePage {
socket:any
chat_input:string;
chats = [];
prova = [];
slideValueBadge = [];
constructor(public navCtrl: NavController) {
var a;
this.socket = io('http://localhost:3000');
this.socket.on('message', (msg) => {
console.log("message", msg);
this.chats.push(msg);
});
this.socket.on('prova', (msgProva) => {
console.log("msgProva", msgProva);
this.prova.push(msgProva);
});
this.socket.on('sValue', (value) => {
let index: number = this.slideValueBadge.indexOf(value);
if (index != -1) {
a = this.slideValueBadge.splice(index, 1);
}
console.log("sliderValue:", value);
});
}
send(msg) {
if(msg != ''){
this.socket.emit('message', msg);
}
this.chat_input = '';
}
cValue(event, nome) {
console.log("SliderValue", event._valA);
this.socket.emit('sValue', event._valA);
}
}
主頁.HTML
<ion-content padding>
<ion-item>
<ion-range [(ngModel)]="brightness" (ionChange)="cValue($event, 'slider1')">
<ion-icon range-left small name="water"></ion-icon>
<ion-icon range-right name="water"></ion-icon>
</ion-range>
</ion-item>
Flusso d'acqua
<ion-badge color="secondary">{{slideValueBadge}}</ion-badge>
<ion-list>
<ion-item *ngFor="let message of chats">{{message}}</ion-item>
</ion-list>
<ion-item>
<ion-input type="text" [(ngModel)]="chat_input" placeholder="Enter message"></ion-input>
</ion-item>
<button ion-button block (click)="send(chat_input)">Send</button>
</ion-content>
這就是我所看到的結果:
如何只顯示一個值? (最后一個)?
基本上,您是將徽章綁定到數組( slideValueBadge = []
)。
只需將綁定值更改為number
,然后在socket.on
方法中對其進行更新。
希望這可以幫助您
顯然這是解決方案,不知道編碼的好壞:
<ion-badge color="secondary">{{slideValueBadge[slideValueBadge.length -1]}}</ion-badge>
沒有*ng-if
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.