问题[angular](coding)

尝试进行简单POST调用但出现错误：

TypeError: Cannot read properties of undefined (reading 'length')
    at HttpHeaders.applyUpdate (http.mjs:222:27)
    at http.mjs:195:58
    at Array.forEach (<anonymous>)
    at HttpHeaders.init (http.mjs:195:33)
    at HttpHeaders.forEach (http.mjs:263:14)
    at Observable._subscribe (http.mjs:2116:29)
    at Observable._trySubscribe (Observable.js:37:25)
    at Observable.js:31:30
    at errorContext (errorContext.js:19:9)
    at Observable.subscribe (Observable.js:22:21)

我正在设置基本标题并发出发布请求：

let headers = new HttpHeaders({'Content-Type': 'application/x-www-form-urlencoded'});
    this.http.post(
      '<target domain>',
      {
        grant_type: '<grant_type>',
        code: '<code>',
        redirect_uri: '<redirect_uri>',
        client_id: '<client_id>'
      },
      {
        headers
      }
    ).subscribe({
      next: (response) => {
        console.log('Token response:', response);
      },
      error: (error) => {
        console.log('error:', error);
      }
    });

headers 变量只是添加了默认new HttpHeaders值Content-Type。看起来它应该可以正常工作。我是不是漏掉了什么？

我想隐藏 BehaviorSubject 的“next”接口，同时保留其其他属性，尤其是能够强制获取最后发出的值。我的想法是，所有状态操作都可以在服务中的私有 BehaviorSubject 上进行，而我所暴露的只是所谓的“ReadonlySubject”，它没有“next”方法。目前我唯一的想法是这样的：

export class ReadonlyBehaviorSubject<T> extends BehaviorSubject<T> {
  override next(_value: T) {
    console.error('cannot set value on a readonly BehaviorSubject');
  }
}

export function toReadonlyBehaviorSubject<T>(bs: BehaviorSubject<T>): ReadonlyBehaviorSubject<T> {
  return new ReadonlyBehaviorSubject(bs.value);
}

如你所见，我们仍然有“next”方法——它什么也不做，只是通知用户无法在 ReadonlyBehaviorSubject 上设置值。有没有更简洁的方法？最好完全不暴露“next”方法？

我使用角度构建了一个 SPA，并在 signalR 中遇到了消息大小的问题，但在增加并将问题移到后面之前，我想用流来拆分消息。

这很简单：

        const subject = new Subject<any>();

        try
        {
            await this.hubConn.send("Values", id, subject) // X
                .catch(err => console.error(err));

            for (let i = 0; i < values.length; ++i)
                subject.next(values[i]);

            subject.complete();
        }
        catch (err: any)
        {
            subject.error('Error');
            console.error(err.message);
        }

但我在标有 // X 的行中收到错误

经过一番调查后，我发现在第二次迭代中streamId是distinct：

我建立了一个小例子来检查发生了什么：

var streams = [];
streams[4] = {};

for (const streamId in streams)
    console.debug(streamId);

这给了我这个结果：

4
distinct
equals
firstOrDefault
lastOrDefault
pushSorted

但这意味着对键进行迭代总是对数组函数进行迭代，但我没有发现有关此问题的任何信息......

我正在使用：

angular 16.2
typescript 5.1.6
signalR 7.0.9 and 8.0.7 (tried both)
nodejs 16.20.2
and I have the target ES2022

所以要么是没有人尝试过流式传输（这听起来不太可能），要么是我的版本不兼容，要么是我的代码中存在一些我看不到的错误......

有谁知道为什么这可能行不通吗？

// 编辑：这里是接收值的服务器端方法：

[HubMethodName(nameof(Values))]
public async Task Values(string id, IAsyncEnumerable<object> values)
{
    try
    {
        object[] result = null;
        if (values != null)
            result = await values.ToArrayAsync();

        Debug.WriteLine(result);
    }
    catch (Exception ex)
    {
        SystemLogger.LogCritical("{ex}", ex);
    }
}

我有一个服务，用于通知类别数组已填充（通过调用应用程序引导程序中的 API）。一旦这些类别准备就绪，我必须针对数组中包含的每个类别启动 API 调用，以查找每个类别的数据详细信息，然后将其显示在同一页面的不同部分。

通知可以以两种不同的方式发生，在应用程序第一次加载结束时（仅启动一次）或每次浏览应用程序的用户到达页面并且类别数组已被填充时。

这是组件代码。

export class CategoriesComponent implements OnInit, OnDestroy {
  tagsCategories: TagCategory[]|null = null;
  dateRangeTags: {start: Date, end: Date};
  component_destroy = new Subject<void>();

  constructor(...)
  {
    const d = new Date();
    this.dateRangeTags = {start: this.commonFunc.getOneMonthAgo(d), end: d};
  }

  ngOnInit() {
    console.log('init', this.tagsCategories);
    this.loader.loadingOn();
    if (this.sharedDataService.getTagCategories().length > 0) {
      //categories have already been loaded
      this.sharedData.notifyTagsCategoriesReady();
    }

   
    this.sharedData.categoriesAvailable$
      .pipe(
        tap(() => {
          const categories = this.sharedData.getTagCategories();
          for (const category of categories) {
            category.date_range_request = {...this.dateRangeTags};
          }
          this.tagsCategories = categories;
          console.log('tap side effect', this.tagsCategories);
          this.loader.loadingOff();
        }),
        filter((v,i) => this.tagsCategories !== null && this.tagsCategories.length > 0),
        switchMap(
          () => from(this.tagsCategories!).pipe(
            mergeMap((category: TagCategory) =>
              this.fetchTagsCategories(category.date_range_request!, category)
                .pipe(
                  tap({
                    next: (categories: TagCategory[]) => {
                      if (categories.length > 0) {
                        const cat = categories[0];
                        if (cat.id === category.id) {
                          category.tags_plots = cat.tags_plots;
                        }
                      }
                    },
                    error: (error) => {
                      category.spinner = false;
                    },
                    complete: () => {
                      category.spinner = false;
                    }
                  }),
                  catchError((error) => throwError(() => error))
                )
            )
          )
        )
      )
      .subscribe({
        next: (val) => {
          console.log('final next', val);
        },
        error: (error: string) => {
          this.errorHandler.displayErrorDialog(error);
        },
        complete: () => {}
      })
  }
}

这是服务中的主题，也是我调用来通知两种不同场景中类别可用性的函数。

export class SharedDataService {
  categories: TagCategory[] = [];
  private _categoriesAvailable = new Subject<boolean>();
  categoriesAvailable$ = this._categoriesAvailable.asObservable();
  
  //this is called when the categories are fetched from the server
  setTagCategories(tagCategories: TagCategory[]) {
    this.categories = tagCategories;
    console.log('Set tag categories');
    this._categoriesAvailable.next(true);
  }

  //this is called when the user visit the categories page and the array is already loaded
  notifyTagsCategoriesReady() {
    console.log('notifyTagsCategoriesReady');
    this._categoriesAvailable.next(true);
  }

  getTagCategories() {
    return this.categories;
  }
}

在组件视图中，我插入了一个保护，如果类别数组尚未初始化或为空，则不会显示各个部分。

<h1 class="nom">{{ 'categories.title' | translate }}</h1>
@if (tagsCategories && tagsCategories.length > 0) {
  @for (tagCategory of tagsCategories; track tagCategory.id) {
<!-- build each section -->
}

当应用程序在类别页面上完全重新加载，然后应用程序引导时，一切都会正常工作，但如果您导航到其他页面，然后返回到该页面，即使 tap 操作符中的 console.log 指示数组已正确填充，也不会显示各个部分。此外，每次您重新访问该页面时，请求都会成倍增加，就好像每次都添加相同的订阅一样，如果数组包含三个元素，那么每次我重新访问该页面时都会添加 3 个请求。我还尝试插入一个 takeUntil 通知组件的销毁，但在这种情况下，订阅只在第一次有效，之后永远不会重新创建，即使打印了 ngOnInit 函数内的 console.log。

显然，我遗漏了很多东西，也许有更好的实现方式来实现我需要做的事情，但如果有人能告诉我为什么 Angular 似乎忽略了数组状态的变化，没有在第一次加载后显示各个部分，我将不胜感激，最重要的是为什么每次我访问页面时请求都会成倍增加。

我正在 Angular 项目中将 Taiga UI 从 v3 迁移到 v4。如果我想将 TuiNotification 用于像 TuiNotification.Warning 这样的常量，那么在 v4 中应该如何使用它呢？这在 v3 中是可以的，但它已经被弃用了，他们建议使用同一个包中的 TuiNotificationT，但在 v4 中不存在它。

以下是当前代码的示例：

...
import { TuiNotification } from '@taiga-ui/core';
...

@Injectable()
export class SomeInputService extends RxState<{
}> {
  constructor(
    private notifications: TuiAlertService
  ) {
    super();

    this.doSomething();
  }

  private doSomething() {
    if (!something) {
       return this.showNotification(
         marker('Not working'), 
         marker('Wrong file'),
         **TuiNotification.Warning**       
       );
    }
    else {
       return this.showNotification(
         marker('Some error'),
         text ?? '',
         **TuiNotification.Error**
       );
    }
  }

  private showNotification(
    title: string,
    text: string,
    status: TuiNotification
  ) {
    const label = this.transloco.translate(title);
    const message = this.transloco.translate(text);
    this.hold(
      this.notifications.open(message, { status, label, autoClose: 10000 })
    );
  }
}

我得到的错误是 Property 'Warning' does not exist on type 'typeof TuiNotification'.ts

我开发了一个 Angular 项目，并使用 ESLint 制定了修饰符规则，如下protected readonly所示strictCamelCase：

    {
        "selector": ["classProperty"],
        "format": ["strictCamelCase"],
        "leadingUnderscore": "forbid",
        "trailingUnderscore": "forbid",
        "modifiers": ["protected", "readonly"]
    }

我在我的项目中使用了一些枚举，例如 EnumButtonSize，并且我用它来声明它：

protected readonly EnumButtonSize = EnumButtonSize;

• 修饰符readonly应该足够了，但是我在我的项目中使用了 Storybook，然后我必须添加protected修饰符以使该变量不出现在 Storybook 文档中（另一种方法是在变量上方添加/** */带有装饰器的注释）@internal
• 这个变量应该在模板中使用，例如<my-button [buttonSize]="EnumButtonSize.LARGE">

我想添加一条特定的 ESLint 规则来支持 PascalCase 命名的枚举（除了上一条规则之外）。我尝试了类似的方法，但没有成功：

{
   "selector": ["classProperty"],
   "format": ["StrictPascalCase"],
   "leadingUnderscore": "forbid",
   "trailingUnderscore": "forbid",
   "modifiers": ["protected", "readonly"],
   "filter": {
      "regex": "^Enum.*",
      "match": true
   }
},

有人可以帮助我或者有不同的想法吗？

基本想法是，我希望在子组件加载数据时显示“Loading”文本，加载完成后文本消失。但是父组件如何知道子组件何时完成数据加载呢？

我的父母长得是这样的：

<div *ngIf="isLoadingFlg">Loading...</div>

<router-outlet></router-outlet>

不知何故，我需要子组件能够设置父级的isLoadingFlg。子组件如下所示：

ngOnInit() {
  this.isLoadingFlg = true;
  setTimeout(() => {
    this.isLoadingFlg = false;
  }, 1000);
}

我在 router-outlet 指令中遇到了这个错误。谁能帮我解释一下为什么会出现这种情况，我完全不知道。所有导入都已添加到 app.module.ts 文件中，但它仍然提示“请验证 router-outlet 是否是 Angular 组件”。我使用的是 Angular 19，这个错误只在最新版本中出现，因为之前的版本中运行的是相同的代码。

 **app.component.html**
    
        <router-outlet></router-outlet>
    
    **app.component.ts**
    
        import { Component } from '@angular/core';
        
        @Component({
          selector: 'app-root',
          standalone:false,
          templateUrl: './app.component.html',
          styleUrl: './app.component.css'
        })
        export class AppComponent {
          title = 'angular_19';
        
        }
    
    **app.module.ts**
    
        import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from "@angular/core";
    import { AppComponent } from "./app.component";
    import { BrowserModule } from "@angular/platform-browser";
    import { AppRoutingModule } from "./app.routes";
    import { DashboardComponent } from "./dashboard/dashboard.component";
    
    @NgModule({
        declarations:[
            AppComponent,
            DashboardComponent],
        imports:[
            BrowserModule,
            AppRoutingModule,
            RouterModule
        ],
        providers:[],
        bootstrap:[AppComponent],
        schemas:[CUSTOM_ELEMENTS_SCHEMA]
    
    
    })
    export class AppModule{}
    **app.router.ts**
    
    import { NgModule } from '@angular/core';
    import { RouterModule, Routes } from '@angular/router';
    import { DashboardComponent } from './dashboard/dashboard.component';
    
     const routes: Routes = [
        {
            path: '',
            redirectTo: '/dashboard',
            pathMatch: 'full',
            component: DashboardComponent
        },  
        {
            path: 'dashboard',
            component: DashboardComponent
        }
    ];
    
    @NgModule({
        imports:[RouterModule.forRoot(routes)],
        exports:[RouterModule]
    })
    export class AppRoutingModule{
    
    }
**main.ts**

import { AppComponent } from './app/app.component';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';


platformBrowserDynamic().bootstrapModule(AppComponent)
.catch(err=>console.error(err))

我有这个 LINQ 过滤器用于我的请求，以便仅获取更大数据集的一部分：

const coreFilter = `permissions != null && permissions.Any(p => p.permissionLevel != 'Hide' && p.areaIId == ${currentCustomer})`;

但它仅当我只要求一个参数时才能正常工作：

p.areaIId == ${currentCustomer})

如果我想按两个参数进行过滤，就会出现此错误：

Angular 应用程序尝试使用 API 调用的结果填充选择中的选项：

<select class="select input input-bordered" formControlName="student" (change)="onStudentChange($event)" >
          <option *ngFor="let student of students" value="{{student._id}}">{{ student.name }}</option>
</select>

初始化：

  ngOnInit(): void {
    this.userService.getStudentsByUser(this.authService.currentUserSig()?._id!).subscribe((response) => {
      this.students = response;
    });
  }

我这里漏掉了什么？在本地调试时，我保存了 html 文件，然后它神奇地填充了，但刷新后它就消失了。