LeO's questions

Tenho como datasourceem uma tabela de materiais um sinal.

  dataSource: WritableSignal<PeriodicElement[]> = signal([]);

Os dados da tabela são exibidos corretamente

Acrescento de acordo com a descrição no matSortcabeçalho.

<table mat-table matSort [dataSource]="dataSource()" class="mat-elevation-z8">
<!-- Position Column -->
  <ng-container matColumnDef="position">
    <th mat-header-cell mat-sort-header *matHeaderCellDef>No.</th>
...

Mas de alguma forma isso não funciona. Eu vi e tentei sem Signals e isso funcionou. Alguma ideia de como usar corretamente com Signals?

Pilha Blitz

Estou codificando um painel de expansão próprio em Angular. Quero imitar o comportamento do Angular Material Expansion Panel (que não funcionará com meu requisito).

Então, eu tenho essencialmente 3 itens, a saber:

1. um ícone inicial
2. texto
3. um botão para recolher/expandir.

Quando clico no ícone de expansão, o texto é exibido. O código em execução é fornecido no Stackblitz .

Quando o painel é recolhido, todos os três ícones ficam no mesmo nível

Isto se deve ao

    align-items: center;

e isso parece perfeito. Assim que eu expando o painel, os ícones flutuam também para o centro do contêiner. Existe uma maneira de fixá-los no topo E centralizá-los quando collapsed?

Eu defini os seguintes tipos

export interface LanguageEditInfoDto {
    canEdit: boolean;
    label: string;
    useDudenLang: boolean;
}
export type UILanguageEditInfoDto = LanguageEditInfoDto & {
    isFormValid: boolean;
};

e defini a seguinte função:

function setLanguages(languages: Record<string, LanguageEditInfoDto>) {
    const langState: Record<string, UILanguageEditInfoDto> = {};
    for (const langCode in languages) {
        langState[langCode] = {
            isFormValid: true,
            ...languages[langCode],
        };
    }
}

Por que recebo o seguinte erro langState[langCode]? E como resolver isso?

TS2322: Type
{   canEdit?: boolean | undefined;   label?: string | undefined;   useDudenLang?: boolean | undefined;   isFormValid: true; }
is not assignable to type UILanguageEditInfoDto
Type
{   canEdit?: boolean | undefined;   label?: string | undefined;   useDudenLang?: boolean | undefined;   isFormValid: true; }
is not assignable to type LanguageEditInfoDto                   

De acordo com a definição, nenhum dos atributos é opcional. Portanto, a afirmação está IMHO errada.

Quero exibir a data em HTML dependendo da localidade definida/usada. Para fins de exibição, quero exibi-lo em inglês ou alemão - dependendo da decisão do usuário. Isso significa que o usuário seleciona a localidade 'de' ou 'en'.

A maneira padrão de exibir a data é

 <span>{{ data.selDate | date: "mediumDate" }}</span>

De acordo com a documentação que tenho {{ value_expression | date [ : format [ : timezone [ : locale ] ] ] }}. Mas esse código não funcionará

 <span>{{ data.selDate | date: "mediumDate" :'':"de-DE" }}</span>
 <span>{{ data.selDate | date: "mediumDate" :undefined:"de-DE" }}</span>

Como especificá-lo no DatePipe?

De acordo com o documento exhaustMaputiliza um ResultSelector e este será removido na V8. Tentei seguir o exemplo , mas não consegui entender como refatorar meu código.

interval(5000)
  .pipe(
    takeWhile(() => !this.isDialogDestroyed),
    exhaustMap(() => this.versService.checkStatus(myParameters))
  )
  .subscribe({
    next: (status) => {
      if (status === 'DONE') {
        this.isDialogDestroyed = true;
        // ...  further processing - removed for simplicity 
      }
    },
    error: () => {
      // Handle errors here
    },
  });

Como adaptar o código para ficar pronto para V8?