My goal is to pass user input to the deviceName string in my component, which should then be passed to the deviceIP string in my service. It seems like the order of using get/set methods might be incorrect. Can someone help me identify the mistake?
Below is the code for my component:
@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() {}
}
Here's the code for my service:
@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);
});
});
}
}
Following is the template I'm using:
<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>
Lastly, here's the module.ts file contents:
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 { }