标签: angular5

我在尝试将 onEachFeature Methode 用于 geoJSON 层时遇到问题。我尝试为每个功能分配一个点击侦听器。问题是，当我单击某个功能时，总是会收到该错误：

未捕获的类型错误：无法读取未定义的属性“detectChanges”

我可以想到这是因为在构造函数运行之前分配了层，但是在 ngOnInit 函数中这样做也不起作用。如果有一个很好的方法来做到这一点会很酷:)

  constructor(private changeDetector: ChangeDetectorRef){}

  fitBounds: LatLngBounds;
  geoLayer = geoJSON(statesData, {onEachFeature : this.onEachFeature});

  onEachFeature(feature , layer) {
    layer.on('click', <LeafletMouseEvent> (e) => {
        this.fitBounds = [
            [0.712, -74.227],
            [0.774, -74.125]
        ];
        this.changeDetector.detectChanges();
    });
  }

  layer: Layer[] = [];
  fitBounds: LatLngBounds;
  
  onEachFeature(feature , layer : geoJSON) {
    layer.on('click', <LeafletMouseEvent> (e) => {
        console.log("tets"+e.target.getBounds().toBBoxString());
        this.fitBounds = [
            [0.712, -74.227],
            [0.774, -74.125]
        ];
        this.changeDetector.detectChanges();
    });
  }
  
constructor(private changeDetector: ChangeDetectorRef){}

ngOnInit() {
      let geoLayer = geoJSON(statesData, {onEachFeature …

如何根据是否使用反应式表单选中复选框来更改 formcontrol 或 formgroup 所需的有效性。

     createForm() {
    this.dvraForm = this.fb.group({ // <-- the parent FormGroup
        primary: this.fb.group({
            txtpremiumDVRA: ['', [Validators.required, ValidatePremium]],
            txtSumInsured: '',
        }),
        fund: this.fb.group({
            txtMoneyMarketFund: '100',
            txtFixedIncomeFund: '0',
        }, {
            validator: totalFund('txtMoneyMarketFund', 'txtFixedIncomeFund'),
            validator2: totalFund2('txtMoneyMarketFund', 'txtFixedIncomeFund')}),
        cbTopUp: false,
        topUp: this.fb.group({
            cboTopUpFrequency: '',
            txtStartPolicyYear: ['', Validators.required,],
            txtNoofTopUpYrs: ['', Validators.required,],
            txtTopUpAmount: ['', [Validators.required, ValidateTopUpAmountDVRA]]
        }),
    });

}

我正在使用 angular 5 的 Electron 应用程序进行渲染，有没有办法以编程方式导出控制台？

我需要一种将日志数据同步到文件的方法，因此我可以随时查看它而无需打开电子开发工具并另存为选项，我需要以编程方式

我保存自己的日志，但是如果有一个模块记录错误，我需要获取整个控制台日志历史记录并将其导出到日志文件

我正在我的 Angular 5 项目中处理路由部分。

我做了以下事情：

1. 我创建了一个名为的新路由模块routes.module.ts：

   import { RouterModule, Routes } from '@angular/router';

   import { UdemyComponent } from './udemy/udemy.component';

   const appRoutes: Routes = [ {path: 'udemy', component: UdemyComponent} ];

   @NgModule({ imports: [ RouterModule.forRoot(appRoutes, { enableTracing: true})//<--Debugging purposes only) ] });

   export class RouteModule {}

2. 在app.module.ts：

   import { RouterModule, Routes } from '@angular/router';

   import { RouteModule } from './routes.module';

   imports: [
   BrowserModule,
   
   ReactiveFormsModule,
   
   HttpClientModule,
   
   RouterModule
   ],
   

   Run Code Online (Sandbox Code Playgroud)

3. 我在 app.component.ts 中添加了以下内容：

最后，我遇到了以下错误：

AppComponent.html:59 错误错误：StaticInjectorError[ChildrenOutletContexts]：
StaticInjectorError[ChildrenOutletContexts]：NullInjectorError：没有提供 ChildrenOutletContexts！在NullInjector.get (core.js:993) at …

我遇到了问题，无法呈现 TreeMap 图表。其他图表类型（如 Line）在我的应用程序中运行良好。我得到的错误是错误#17。我使用的是 Angular 5。你能分享任何使用 Angular5 和 Highcharts for TreeMap 的工作示例吗？

感谢您的快速帮助。

我想添加标头以从 Angular 5 Web 应用程序发布请求。我创建了以下 Injectable 类，在我的应用程序模块中注册：

@Injectable()
    export class headerInterceptor implements HttpInterceptor {
      intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {    
        // Clone the request to add the new header         
        const authReq = req.clone({
          headers: new HttpHeaders({
            'Content-Type':  'application/json; charset=utf-8',        
          })
        });        
        return next.handle(authReq);


      }
    }

我有网络通信服务，并且我添加了如下的正文参数。

@Injectable()
export class NetworkService {

  Root:string = 'some valid url';
  results:Object[];
  loading:boolean;

  // inject Http client to our client service.
  constructor(private httpClient: HttpClient ) {

  }



  login(loginParams : URLSearchParams){    
    let baseURL = `${this.Root}/login`;                    
    this.httpClient.post(baseURL, …

我正在将 Angular 5 与 Materialise 一起使用，并且我有一个完美运行的日期选择器：

<input materialize="pickadate" 
 type="text" class="datepicker" placeholder="Selecione a Data" 
 [materializeParams]=datePickerParams>

我想在更改此输入日期时调用诸如“dateChanged(date)”之类的方法，例如，我尝试使用 (change)="dateChanged($event)"，但不起作用。

我mat-date-picker在我的应用程序中使用过，html 文件如下所示：

  <mat-form-field>
<input matInput [matDatepicker]="picker" formControlName="date" placeholder="Choose a date">
<mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
<mat-datepicker #picker></mat-datepicker>

我在另一个组件中使用了完全相同的代码段并且它可以工作，但是在这个组件中它显示错误：

ERROR 错误：mat-form-field 必须包含一个 MatFormFieldControl。

即使页面在错误后加载，日期选择器的按钮也不会显示，我无法选择日期。

我有一个用 Angular 制作的 Sidenav 菜单。该组件如下所示：

模板：

 <mat-toolbar color="primary" [fxLayoutAlign]="(settings.menuType != 'mini') ? 'space-between center' : 'center center'" class="sidenav-header">
    <a mat-raised-button color="accent" routerLink="/" (click)="closeSubMenus()" class="small-logo">Menu</a>
    <a *ngIf="settings.menuType == 'default'" class="logo" routerLink="/" (click)="closeSubMenus()">mEMS</a> 
</mat-toolbar>

<div fxLayout="column" fxLayoutAlign="center center" class="user-block transition-2" [class.show]="settings.sidenavUserBlock"> 
    <div [fxLayout]="(settings.menuType != 'default') ? 'column' : 'row'" 
         [fxLayoutAlign]="(settings.menuType != 'default') ? 'center center' : 'space-around center'" class="user-info-wrapper">
        <div class="user-info">
            <p class="name"> {{currentUser}}</p>
            <p *ngIf="settings.menuType == 'default'" class="position">Rocket Scientist<br> </p>
        </div>
    </div>
    <div *ngIf="settings.menuType != 'mini'" fxLayout="row" fxLayoutAlign="space-around center" class="w-100 muted-text"> …

我正在尝试使用打字稿函数设置图像 src 属性，但一次又一次地获得“无法设置未定义错误的属性”。我不明白我哪里做错了。

html代码：

<div class="panel-heading" style="border-bottom: 1px solid #cfdbe2; padding: 14px 15px;">
    <div class="pull-left">
        <img class="media-box-object img-circle thumb32" src="{{other_user_image}}" alt="Image" />
    </div>
    <div class="panel-title">User</div>
</div>

component.ts 代码：

export class ChatComponent implements OnInit {
    other_user_image: string;

    constructor(
        public authService: AuthService,
        afAuth: AngularFireAuth,
        public db: AngularFirestore,
        private router: Router) {}

    ngOnInit() {
    }

    openChatWindow(event: any){
        var target = event.target || event.srcElement || event.currentTarget;
        var idAttr = target.attributes.id;
        var value = idAttr.nodeValue;
        // var elem_id = (this.elem);
        console.log(value);
        var user_chat_room = this.db.collection("users").doc(value) …