在我的代码中,用户输入应该传递给我的组件中的deviceName字符串(它确实是这样做的),而它又应该传递给我的服务中的deviceIP字符串。
我猜我使用get / set方法的顺序是不正确的。有人能帮我找出我做错了什么吗?
下面是我的组件:
@Component({
selector: 'app-section-computer-management',
templateUrl: './section-computer-management.component.html',
styleUrls: ['./section-computer-management.component.css'],
})
export class SectionComputerManagementComponent implements OnInit {
ping: number = 0;
public deviceName = 'cstorch-3420';
constructor(private _pingService: PingService) {
this._pingService.pingStream.subscribe(ping => {
this.ping = ping; });
}
changeDIP(val){
this._pingService.setDIP(this.deviceName);
}
showDIV() {
alert(`GV ${this._pingService.getDIP}`);
}
ngOnInit() {}
}
这是我的服务:
@Injectable()
export class PingService {
pingStream: Subject<number> = new Subject<number>();
ping: number = 0;
deviceIp = "";
url = `http://${this.deviceIp}`;
setDIP(val: string) {
this.deviceIp = val;
}
getDIP(val: string) {
return this.deviceIp;
}
constructor(private _http: Http) {
interval(1000)
.subscribe((data) => {
let timeStart: number = performance.now();
this._http.get(this.url)
.subscribe((data) => {
let timeEnd: number = performance.now();
let ping: number = timeEnd - timeStart;
this.ping = ping;
this.pingStream.next(ping);
});
});
}
}
下面是我使用的模板
<div class="section-container">
<div class="cards">
<div class="card-deck">
<div class="card text mb-3 shadow card-theme">
<div class="card-header card-header-theme text-center">
<h5>Please Enter A Device Name or IP Address</h5>
</div>
<div class="card-body">
<div ng-app="">
<p align="center"><input class ='form-control input-lg'
style= "width:300px" [(ngModel)]="deviceName" type="text"> {{deviceName}}
</p>
</div>
</div>
</div>
<div class="card text-center mb-3 shadow card-theme">
<div class="card-header card-header-theme">
<h5>Machine Ping</h5>
</div>
<div class="card-body">
{{ping | number:'1.0-0'}}ms
</div>
</div>
</div>
<div class="row-fluid cards">
<div class="card shadow card-theme">
<div class="card-body">
</div>
<div class="col-sm-2">
<div class="card shadow card-theme">
<div class="card-body">
<h5 class="card-title">Special title treatment</h5>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
<a href="#" class="btn btn-primary">Go
somewhere</a>
</div>
</div>
</div>
</div>
</div>
最后是module.ts文件
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { NavbarComponent } from './navbar/navbar.component';
import { SidebarComponent } from './sidebar/sidebar.component';
import { SectionDashboardComponent } from './Sections/section-dashboard/section-dashboard.component';
import { SectionComputerManagementComponent } from './Sections/section-computer-management/section-computer-management.component';
import { SectionHelpdeskLinksComponent } from './Sections/section-helpdesk-links/section-helpdesk-links.component';
import { BarChartComponent } from './charts/bar-chart/bar-chart.component';
import { LineChartComponent } from './charts/line-chart/line-chart.component';
import { PieChartComponent } from './charts/pie-chart/pie-chart.component';
import { ChartsModule } from 'ng2-charts';
import { HttpClientModule, HttpClient } from '@angular/common/http';
import { freshServiceService } from './Services/freshservice.service';
import { PingService } from './Services/pingservice.service';
import { HttpModule } from '@angular/http';
import {FormsModule} from '@angular/forms';
@NgModule({
declarations: [
AppComponent,
NavbarComponent,
SidebarComponent,
SectionDashboardComponent,
SectionComputerManagementComponent,
SectionHelpdeskLinksComponent,
BarChartComponent,
LineChartComponent,
PieChartComponent
],
imports: [
BrowserModule,
AppRoutingModule,
ChartsModule,
HttpClientModule,
HttpModule,
FormsModule,
],
providers: [freshServiceService, PingService, HttpClient],
bootstrap: [AppComponent]
})
export class AppModule { }
发布于 2019-05-29 03:30:25
setDIP
方法是在组件中定义的,但从未调用过。当您在输入字段中写入某些内容时,不会调用此方法。您需要捕获输入字段上的change
事件并执行setDIP
方法。
像这样修改你的代码:
<p align="center"><input class ='form-control input-lg'
style= "width:300px" [(ngModel)]="deviceName" (change)="setDIP($event.target.value)" type="text"> {{deviceName}}
</p>
发布于 2019-05-29 03:25:08
使用typescript中的getter和setter:
在MyService.ts中
_ping: number = 0;
public set ping(ping: number) {
this._ping = ping;
}
public get ping() {
return this._ping;
}
在component.ts中
constructor(private service: MyService) {}
changePing() {
this.service.ping = 1;
console.log(this.service.ping);
// 1
}
https://stackoverflow.com/questions/56348679
复制相似问题