Question

在我的代码中，用户输入应该传递给组件中的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 { }

Answer 1

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>

Answer 2

使用打字稿中的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
}

如何从组件更改服务变量的值？

2 个答案: