标签: angular7

我尝试在 Angular 7 应用程序中使用 Blockly，但无法注入 Blockly 编辑器。

我已经从https://developers.google.com/blockly/guides/get-started/web下载了文件，并将 blockly_compressed.js 复制到我的 src 目录中（并将其重命名为 blockly.js）。然后我尝试从我的组件访问 Blockly 并收到错误。

我尝试过的：

导入“../blockly.js”

无法编译，给出“错误 TS2304：找不到名称“Blockly”。”

import { Blockly } from '../blockly'

编译，但在浏览器中打开应用程序时出现以下错误：

ERROR TypeError: _blockly__WEBPACK_IMPORTED_MODULE_4__.Blockly.inject is not a function

添加包含以下内容的 blockly.d.ts 文件：

export namespace Blockly {
    export function inject(div: string, config: any): void;
}

给出与上面相同的错误。

关于我还可以尝试什么的任何建议？

我正在尝试自定义角度材料 mat-form-field ：我能够使用以下方法自定义下划线边框：

::ng-deep.mat-form-field-ripple {
  background-color: yellow;
}

现在我正在尝试将禁用状态下的下划线边框自定义为实线而不是虚线：

我试过这个，但它对下划线不起作用：

::ng-deep.mat-form-field-disabled
 {

 }

我希望它在禁用状态下呈灰色实心

 <mat-form-field>
    <input matInput placeholder="Input" [disabled]='true'>
  </mat-form-field>

我正在尝试提升垫表中悬停的行，因此将<tr>悬停时的高度更改为悬停时的高度，但阴影效果的高度未显示在行的底部，但显示在行的顶部、左侧和右侧。

.html

<div class="mat-elevation-z2" #TABLE>
      <table mat-table [dataSource]="dataSource" matSort>

    <!-- Required Columns... -->

    <tr mat-header-row *matHeaderRowDef="columnsToDisplay"></tr>
        <tr mat-row *matRowDef="let row; let e = index; columns: columnsToDisplay;"
          (mouseover)="onMouseOver(e)" [ngClass] = "{'mat-elevation-z24' : e == mouseOverIndex}"></tr>
      </table>
    </div>

.ts

 mouseOverIndex = -1;

public onMouseOver(index) {
    this.mouseOverIndex = index;
  }

.css

.mat-row:hover {
  cursor: pointer;
}

我在这里缺少什么？

我尝试使用“z24”、“z16”、“z8”等，但没有用。

我有一个组件，它是延迟加载模块的一部分。

有没有办法 matDialog.open() 和延迟加载模块并显示组件？

export class testComponent implements OnInit {
  constructor(
    public matDialog: MatDialog,
    private moduleLoader: NgModuleFactoryLoader
  ) {}
  ngOnInit() {}

  openModal() {
    this.moduleLoader
      .load("./modules/test-modal/test-modal.module#TestModalModule")
      .then((module: NgModuleFactory<any>) => {
        this.matDialog.open(/*insert component and load the module*/);
      });
  }
}

我只需要一个来自匹配整数的验证。因此我使用pattern带有正则表达式的验证器（见下文）。此外，该字段不应为空，因此我添加了required验证器。

但pattern错误永远不会被触发。我阅读了 angular 文档并查看了 的源代码，pattern但对我来说仍然没有意义。此外，我已经阅读了几乎所有与此主题相关的关于 stackoverflow 的问题。但我仍然无法弄清楚为什么该模式不起作用。

或许有大佬可以帮帮我，谢谢！

这是我的代码 component.ts：

// definition of the formcontrol
hours = new FormControl('', [
  Validators.required,
  Validators.pattern('^[0-9]*$'),
])

// for debugging
log() {
  console.log('required: ', this.hours.hasError('required'));
  console.log('pattern: ', this.hours.hasError('pattern'));
  console.log('Erros: ', this.hours.errors);
}

模板：

<mat-form-field>
  <input matInput [formControl]="hours" (input)="log()"
    placeholder="Anzahl der ausbezahlten Überstunden" type="number">
  <mat-error *ngIf="hours.hasError('required') && !hours.hasError('pattern')">
    Anzahl der Überstunden fehlt!
  </mat-error>
  <mat-error *ngIf="!hours.hasError('required') && hours.hasError('pattern')">
    Anzahl muss eine Ganzzahl sein!
  </mat-error>
</mat-form-field>

例子inputValue=""： …

我是 Angular 的新手，我正在尝试实现 api 调用，它在所有 api 的标头中发送令牌，所以我正在使用拦截器。

我无法在请求中设置标头。

jwt.interceptor.ts

import { Injectable } from '@angular/core';
import { HttpRequest, HttpHandler, HttpEvent, HttpInterceptor } from '@angular/common/http';
import { Observable } from 'rxjs';

@Injectable()
export class JwtInterceptor implements HttpInterceptor {
    constructor() { }

    intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {

        let currentUser = localStorage.getItem('useremail')
        let currentUserToken = localStorage.getItem('token')
        if (currentUser && currentUserToken) {
            request = request.clone({
                setHeaders: {
                    'Authorization': `${currentUserToken}`
                }
            });
        }
        // console.log("Request", request)
        return next.handle(request);
    }
}

app.module.ts

import { BrowserModule …

我们的开发团队最近将一个 Angular 5 项目更新到了 Angular 7。我已经下载了 repo 并且我正在尝试构建源代码，但是当我运行ng build命令时，我在 No NgModule metadata found for 'AppModule' 中得到一个错误.

如果我运行ng --version命令，它会显示以下内容：

• 角 CLI：7.3.6
• 节点：11.10.0
• 操作系统：win32 x64
• 角度：7.2.10

该app.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 { AdminComponent } from './layout/admin/admin.component';
import { AdminComponent1 } from './layout/admin1/estimate.component';
import { AuthComponent } from './layout/auth/auth.component';
import { BrowserAnimationsModule …

我正在构建一个带有 angular 的小型 SPA，由于我是 angular 的新手，因此我将 angular 教程用作我的应用程序的路线图。一切正常，直到从 sqlite 数据库检索数据（由于实现限制，不可能使用任何其他类型的后端代码）。教程（https://angular.io/tutorial/toh-pt6）使用内存数据库，这显然不适合我。我想要从 sqlite 检索数据的服务并且可以注入到组件中

成分

   import { Component, OnInit } from '@angular/core';
   import { Areport } from '../../classess/areport';
   import { ReportService } from "../../services/report.service";
@Component({
  selector: 'app-daily-report',
  templateUrl: './daily-report.component.html',
  styleUrls: ['./daily-report.component.css']
})
export class DailyReportComponent implements OnInit {
  reports : Areport[];
  constructor(private reportService: ReportService) { }
  getReports(): void {
    this.reportService.getReports()
        .subscribe( reports => this.reports = reports)
  }
  ngOnInit() {
    this.getReports();
  }
}

报告服务

import { Injectable } from '@angular/core'; 
import …

我有一个表格，其中我将 ngx-select-dropdown 与 angular7 一起使用。在我的表单中选择选项是必需的。我想在提交表单时验证它。但是我的验证方法不适用于 ngx-select-dropdown 库，并且在 ngx-select-dropdown 的文档中我找不到任何有关验证的帮助信息。是否可以验证它？

 <ngx-select-dropdown (change)="onSelectDropdown($event)" name="unit" [config]="config"
[ngClass]="{ 'is-invalid': f.submitted && !unit.valid }"
[options]="unitsList"
[(ngModel)]="createUser.unit" id="unit" #unit="ngModel" required>
</ngx-select-dropdown>
<div *ngIf="f.submitted && !unit.valid" class="invalid-feedback">Unit is required</div>

我正在尝试在 Angular 7 中对查询参数值进行编码。但是当我的查询参数值包含任何特殊字符时，我得到 400 Bad Request 状态代码

失败的请求 URL： http://localhost/api/67/cardvalues?parentcardvalues=STONE&parentcardvalues=STONE%20AGE

但是，当我的查询参数值不包含任何特殊字符时，我得到 200 OK 状态代码。

请求成功地址： http://localhost/api/67/cardvalues?parentcardvalues=STONE&parentcardvalues=STONE

预期的请求 url 必须像 http://localhost/cardvalues?parentcardvalues=VALUE1&parentcardvalues=VALUE2

下面是我的代码，

parentcardvalues=["STONE","STONE AGE"]

let myparams = new HttpParams();

    if(parentcardvalues.length != 0)
       parentcardvalues.forEach((value) => { 

myparams = myparams.append( 'parentcardvalues',   encodeURIComponent(value) );

});

 this.http.get(this.baseUrl + 'api/67/cardvalues', {params: myparams});

Swagger 规范是，

卷曲

curl -X GET "http://localhost/api/cardvalues?parentcardvalues=STONE&parentcardvalues=STONE%20AGE" -H  "accept: application/json"

请求网址

http://localhost/api/cardvalues?parentcardvalues=STONE&parentcardvalues=STONE%20AGE