小编RAH*_*NDU的帖子

检查反应式表单值是否从初始值更改

我有一个包含 3 个控件的反应式表单,我想检测表单的更改。我已经创建了一个表单的值更改方法并订阅了它,但是。现在,每当它的任何控制值发生变化时,就会发出事件。

如果用户向这 3 个控件的 ant 添加了任何值并尝试退出页面,那么我想提示一个模式,表单中存在未保存的更改。

我怎样才能检查表单更改时发出的值是否不同于其初始值?

public createGroupForm : FormGroup;

ngOnInit() {
  this.createGroupForm = this._formBuilder.group({
      groupName: new FormControl("", [Validators.required]),
      groupPrivacy: new FormControl(null, [Validators.required]),
      groupTagline: new FormControl('')
  });

  this.onCreateGroupFormValueChange();
}


onCreateGroupFormValueChange(){
    this.createGroupForm.valueChanges.subscribe(value => {
      console.log(value);
      //emitting every time if any control value is changed
    });
}
Run Code Online (Sandbox Code Playgroud)

typescript angular

20
推荐指数
1
解决办法
5万
查看次数

如何在 Nx Workspace 中使用短路径导入?

我使用 Angular 预设创建了一个 NX 工作区。我有一个应用程序和两个库。在我的应用程序中,我尝试使用较短的路径进行导入。

使用我的应用程序中当前的方法,我可以仅对我的应用程序的所有文件和文件夹使用短路径。每当我尝试在我的应用程序中导入任何库时都会出现此错误 -Cannot find module or its corresponding type declarations.

tsconfig.base.json

{
    "compileOnSave": false,
    "compilerOptions": {
        "rootDir": ".",
        "sourceMap": true,
        "declaration": false,
        "moduleResolution": "node",
        "emitDecoratorMetadata": true,
        "experimentalDecorators": true,
        "importHelpers": true,
        "target": "es2015",
        "module": "esnext",
        "lib": ["es2017", "dom"],
        "skipLibCheck": true,
        "skipDefaultLibCheck": true,
        "baseUrl": ".",
        "paths": {
            "@extranet/leftbar": ["libs/extranet/leftbar/src/index.ts"],
            "@extranet/topbar": ["libs/extranet/topbar/src/index.ts"]
        }
    },
    "exclude": ["node_modules", "tmp"]
}
Run Code Online (Sandbox Code Playgroud)

应用程序 - tsconfig.json

compilerOptions": {
        "baseUrl": "src",
        "forceConsistentCasingInFileNames": true,
        "strict": true,
        "noImplicitReturns": true,
        "noFallthroughCasesInSwitch": true,
        "paths": {
            "@app/*": ["app/*"],
            "@core/*": …
Run Code Online (Sandbox Code Playgroud)

angular nrwl nrwl-nx

9
推荐指数
1
解决办法
1万
查看次数

Angular HTTP 拦截器等待 http 请求,直到获得刷新令牌

我已经构建了 AuthInterceptor,它在 401 错误时发送请求以获取新令牌。

当我遇到 401 错误时,会调用 handle401Error 方法,但我试图等待其他 HTTP 请求,直到获得新令牌。但它不会等到获取新的刷新令牌,尽管它正在进行 HTTP 调用并获取新的访问令牌。请找到我所附的屏幕截图。

在此输入图像描述

拦截器.ts

isRefreshingToken = false;
tokenSubject: BehaviorSubject<string | null> = new BehaviorSubject<string | null>(null);

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

    const timeOut = appSettings.ajaxTimeout;
    const retryCount = appSettings.retryCount;
    const retryDelay = appSettings.retryDelayMS;

    return next.handle(request).pipe(
        timeout(timeOut),
        catchError((error) => {
            if (error instanceof HttpErrorResponse) {
                const httpErrorCode: number = error['status'];
                switch (httpErrorCode) {
                    case StatusCodes.BAD_REQUEST:
                        return throwError(error);
                        //return this.handle400Error(error);
                    case StatusCodes.UNAUTHORIZED:
                        return this.handle401Error(request, next);
                    default:
                        this._toastr.error(
                            'Sorry! something …
Run Code Online (Sandbox Code Playgroud)

typescript angular-http-interceptors angular

5
推荐指数
1
解决办法
1919
查看次数

Mapbox GL setData 更新图层

在我的角度应用程序中,我使用 Directions api 并尝试添加从一个方向到另一个方向的路线路径。第一次发出 ajax 请求时,路由路径已正确创建,但从第二次开始,我看不到路由路径。

从第二次 ajax 请求开始,我收到此错误 - 此地图上已存在 id 为“route”的图层

有没有办法更新mapbox中的源和图层?

drawRoute() {
const url = `https://api.mapbox.com/directions/v5/mapbox/driving/${this.startData?.lng},${this.startData?.lat};${this.endData?.lng},${this.endData?.lat}?alternatives=true&geometries=geojson&steps=true&access_token=${environment.mapbox.accessToken}`;

this._http.get(url).subscribe({
    next: (result) => {
        const geojson: any = {
            type: 'Feature',
            properties: {},
            geometry: {
               type: 'LineString',
               coordinates: result.routes[0]
            }
        };

        if (this.map?.getSource('route')) {
            const source: mapboxgl.GeoJSONSource = this.map?.getSource('route') as 
             mapboxgl.GeoJSONSource;
            source.setData(geojson);
        } else {
            this.map?.addSource('route', {
            type: 'geojson',
                data: {
                    type: 'Feature',
                    properties: {},
                    geometry: {
                       type: 'LineString',
                       coordinates: result.routes[0].geometry.coordinates
                    }
                }
            });
        }

        this.map?.addLayer({
            id: 'route',
            type: …
Run Code Online (Sandbox Code Playgroud)

javascript mapbox mapbox-gl

4
推荐指数
1
解决办法
8105
查看次数