问题[angular](coding)

在组件（或服务）中，我调用 Main 方法，该方法又调用另外 2 个私有方法。

export class MyService
{
    private Stage1 (N : number)
    {
      console.log ('-->Stage1');
      for (let i=0;i<N;i++)
      {
          //Send HTTP request
      }
      console.log ('<--Stage1');
    }
    
    private Stage2 (N: number)
    {
      console.log ('-->Stage2');
      for (let i=0;i<N;i++)
      {
           //Send HTTP request
      }
      console.log ('<--Stage2');
    }
    
    public Main ()
    {
        this.Stage1 (5);    
        this.Stage2 (7);
    }
}

问题：我希望仅在 Stage1 完成后才调用 Stage2。目标是获得以下输出：

-->Stage1
<--Stage1
-->Stage2
<--Stage2

您能否建议我应该在代码中添加什么内容？我尝试过：

async public Main ()
{
    await this.Stage1 ();    
    await this.Stage2 ();
}

但这一概念失败了。

谢谢你，Zvika

angular 5，在“RecordManagerComponent”类中有一个公共对象属性“info”，定义如下：

      export class RecordManagerComponent {
          public info: { form_status: string, proj_title_cntr_no: string, block_t: 
               string, floor: string, contractor: string, test: string };
        .....
      }

然后我创建另一个从“RecordManagerComponent”扩展的类，名为“F48ItemSearchComponent”，并定义一个对象属性“info”，如下所示：

    export class F48ItemSearchComponent extends RecordManagerComponent {
        public info: { form_status: string, proj_title_cntr_no: string, block_t: 
             string, floor: string, contractor: string };
        .....
    }

但有以下错误：

src/app/structure/inspect/components/f48/f48-item-search/f48-item-search.component.ts(33,14) 中出现错误：错误 TS2415：类“F48ItemSearchComponent”错误地扩展了基类“RecordManagerComponent”。属性“info”的类型不兼容。类型“{form_status：string；proj_title_cntr_no：string；block_t：string；floor：string；contractor：st...'”无法分配给类型“{form_status：string；proj_title_cntr_no：string；block_t：string；floor：string；contractor：st...'”。存在两种具有相同名称的不同类型，但它们之间没有关联。类型“{form_status：string；proj_title_cntr_no：string；block_t：string；floor：string；contractor：st...'”中缺少属性“test”。

为什么？我必须重命名子类“F48ItemSearchComponent”中的“info”？

@output获取具有角度信号的变量值的最佳方法是什么？

假设我们有以下内容

$foo = signal<string>('')

@Output() fooChanged: EventEmitter<string> = new EventEmitter<string(this.$foo())

1. 效果：我首先想到的是使用它，effect但是当我读到它时，如果可能的话应该避免使用它。

2. computed：我很想使用它，但我不知道如何正确实现它

仅供参考：我正在使用19.1.0karma 的角度

假设我们有此服务和组件

// NOT PROVIDED IN ROOT!
@Injectable()
export class TestService {
  getData(): string {
    return 'this is real data'
  }
}

// Standalone component!
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrl: './app.component.scss',
  providers: [TestService]
})
export class AppComponent {
  service = inject(TestService)
}

正如您所注意到的，该服务不是在根中提供的，而是在组件中提供的，并且也被注入。我注意到，使用此设置我无法在 karma 单元测试中模拟此服务。我可以看到它与组件中提供的服务有关，但我不确定如何修复它。以下是测试的片段。

describe('AppComponent', () => {
  beforeEach(async () => {
    await TestBed.configureTestingModule({
      imports: [AppComponent],
      providers: [{
        provide: TestService,
        useValue: {
          getData: () => ('mocked data'),
        }
      }]
    }).compileComponents();
  });

  it('should create the app', () => {
    const fixture = TestBed.createComponent(AppComponent);
    const app = fixture.componentInstance;

    expect(app).toBeTruthy();

    console.log(app.service.getData())
  });
});

我应该期望在这里app.service.getData()应该注销"mocked data"，但是，我得到了"this is real data"。

在 Angular 中[(ngModel)]="abc"，我知道这意味着双向绑定，更改模型 (ts) 中的值 abc 将反映在视图 (html) 中，更改视图值将更新模型中的值，如下例中的情况 5 所示。我还知道[ngModel]="abc"这意味着如果模型“abc”值发生变化，视图将相应更新，如下例中的情况 1 所示。

1. 但我不知道[(ngModel)]="abc"视图的变化（html）如何更新模型（ts）的值？

我已经看到了这个问题

[https://stackoverflow.com/questions/46120731/angular-ngmodel-vs-ngmodel-vs-ngmodel][1]

它提到

[(ngModel)]="expression"

被编译器解包为

[ngModel]="expression" (ngModelChange)="expression=$event"

在我的情况下，表达式是“abc”，因此我尝试在情况 2、3、4（尤其是情况 3）中进行模拟，但都无法反映从视图到模型的变化。

测试代码如下：
test-binding1.component.ts

import {  Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-test-binding1',
  templateUrl: './test-binding1.component.html',
  styleUrls: ['./test-binding1.component.css']
})
export class TestBinding1Component implements OnInit {

  constructor() { }
  abc:string = "2";

  ngOnInit() {
  }

}

测试绑定1.组件.html

<p>case 1: Input with [ngModel]:<input type="text" [ngModel]="abc"/></p>
<p>case 2: Input with (ngModel):<input type="text" (ngModel)="abc"/></p>
<p>case 3:Input with (ngModelChange)="expression=$event":<input type="text" 
    (ngModelChange)="abc=$event"/></p>
<p>case 4:Input with (ngModelChange)="$event":<input type="text" 
        (ngModelChange)="$event"/></p>
<p>case 5:Input with [(ngModel)]:<input type="text" [(ngModel)]="abc"/></p>
<p>case 6:{{abc}}</p>

当访问 test-binding1.component.html 时，情况 1、5、6 最初显示 2，情况 2、3、4 显示空白。
如果我更新情况 5 中的文本框值，情况 1、6 中的文本框值会随之更改，情况 2、3、4 中的文本框值则没有效果。
如果更新文本框情况 1、2、3、4 中的值，其他文本框值不会发生任何变化。

我最近成功地将我的一个应用程序迁移到了 Angular 19 和 PrimeNG 19。我以后要做的就是迁移到新的、首选的独立组件用法。

该过程的前两个步骤使用以下方式自动完成ng g @angular/core:standalone：

• 将所有组件、指令和管道转换为独立
• 删除不必要的 NgModule 类

...一切顺利。 经过这两个步骤后，可以在https://tzexplorer.org找到正在运行的应用程序。 上面的 Github 链接指向我的开发分支，其中包含上次成功状态下的代码。

但是我尝试完成最后一步（使用独立 API 引导应用程序）却因这个运行时错误而受阻：

我的main.ts最终结果看起来像这样：

import { enableProdMode, importProvidersFrom } from '@angular/core';

import { environment } from './environments/environment';
import { initTimezoneLarge } from '@tubular/time';
import { themeProvider } from './app/mytheme';
import { AppService } from './app/app.service';
import { HttpTimePoller } from './app/http-time-poller/http-time-poller';
import { TzExplorerApi } from './app/api/api';
import { provideHttpClient, withInterceptorsFromDi, withJsonpSupport } from '@angular/common/http';
import { AppRoutingModule } from './app/app-routing.module';
import { AutoCompleteModule } from 'primeng/autocomplete';
import { BrowserModule, bootstrapApplication } from '@angular/platform-browser';
import { provideAnimations } from '@angular/platform-browser/animations';
import { ButtonModule } from 'primeng/button';
import { CheckboxModule } from 'primeng/checkbox';
import { DialogModule } from 'primeng/dialog';
import { FormsModule } from '@angular/forms';
import { InputTextModule } from 'primeng/inputtext';
import { RadioButtonModule } from 'primeng/radiobutton';
import { RippleModule } from 'primeng/ripple';
import { SelectModule } from 'primeng/select';
import { TabsModule } from 'primeng/tabs';
import { TubularNgWidgetsModule } from '@tubular/ng-widgets';
import { AppComponent } from './app/app.component';

if (environment.production) {
  enableProdMode();
}

initTimezoneLarge();

bootstrapApplication(AppComponent, {
  providers: [
    importProvidersFrom(AppRoutingModule, AutoCompleteModule, BrowserModule, ButtonModule, CheckboxModule,
      DialogModule, FormsModule, InputTextModule, RadioButtonModule, RippleModule, SelectModule, TabsModule,
      TubularNgWidgetsModule),
    themeProvider,
    AppService,
    HttpTimePoller,
    TzExplorerApi,
    provideHttpClient(withInterceptorsFromDi(), withJsonpSupport()),
    provideAnimations()
  ]
})
  .catch(err => console.error(err));

...这本质上只是将一堆进口货从我的几乎没有改变的货中取出app.component.ts并移入其中main.ts，然后用新的货main.ts替换。platformBrowserDynamic().bootstrapModule(AppModule)bootstrapApplication(AppComponent...

到目前为止，我能找到的所有建议都与追踪对BrowserModule、BrowserAnimationsModule、provideAnimations和 的冗余引用有关provideAnimationsAsync。在我的代码中，至少没有以任何明显的方式发生这种情况。

我现在主要怀疑某些 PrimeNG 初始化是冗余的根源，但如果是这样的话，我不知道它在哪里发生或如何发生，或者我该如何解决这个问题。

我尝试逐个注释掉提供程序，直到没有提供程序，但运行时错误仍然存​​在。我尝试将文件的大部分复杂性移到main.ts单独的文件中app.config.ts，但这也无济于事。

有人有什么想法吗？

使用 rxjs 7.5.7，当轮询 http 请求在几个 false 值之后最终返回 true 时，我返回一个承诺，但是 takeUntil 永远不会再被调用。

我尝试以下代码：

return timer(0, 5000).pipe(
  takeUntil(this.http.get('https://testapi/isTrue'))
    .pipe(filter((isTrue: boolean) => {
      return isTrue; // filter method filters false values so they are not emitted
    }))
  )
).toPromise();

注意： https://testapi/isTrue多次返回 false，最后一次返回 true。

但是在第一次调用调用结果为false的定时器发起的http查询请求this.http.get()之后，定时器5秒之后什么都没有发生，没有错误，takeUntil中的this.http.get()也不再被调用。

那么我的指令有什么问题？

注意2：返回的promise被正确使用

使用 Angular Material 对话框弹出时，我发现以下错误。单击“添加产品”按钮时，发现以下错误

阻止在元素上使用 aria-hidden，因为其后代保留了焦点。焦点不能对辅助技术用户隐藏。避免在焦点元素或其祖先上使用 aria-hidden。...

我的 stackblitz 链接是 https://stackblitz.com/github/reegan2024/mygithubrepo?file=README.md

有人可以帮忙吗

使用 IntelliJ IDEA 2024.3.3（终极版）和捆绑的 Angular 插件 243.24978.46

IDE 不再了解任何 Angular 特定的块（例如@if或@for），并将它们显示为错误。

据我记得，这曾经在其他项目中起作用。

对于演示页面，我想使用 Angular 动画逐个元素显示页面内容

我的目标是制作一个动画来隐藏我的内容，并为每个元素制作一个动画，但我的内容被很好地隐藏了（：self），但其他动画直到动画结束时才产生效果，此时我的所有内容都同时出现

animations : [ 
    trigger('homeAnimations', [
      transition(':enter', [
        query(':self',[
          style({opacity:0})
        ]),
        query('#presentation h1', [
          animate('2s', style({ opacity: 1 }))
        ], { optional: true }),
        query('#presentation h2', [
          animate('2s', style({ opacity: 1 }))
        ], { optional: true }),
        query('#presentation p', [
          animate('2s', style({ opacity: 1 }))
        ], { optional: true }),
        query('#btn1', [
          animate('2s', style({ opacity: 1 }))
        ], { optional: true }),
        query('#btn2', [
          animate('2s', style({ opacity: 1 }))
        ], { optional: true }),
        query('#btn3', [
          animate('2s', style({ opacity: 1 }))
        ], { optional: true }),
      ])
    ])
  ],