主页 / user-19232107

Sofie Buur's questions

Martin Hope
Sofie Buur
Asked: 2024-08-08 18:48:52 +0800 CST
  • 8

我已经在整个项目中使用了 ngx Translation，并且它运行良好 - 除了这种情况。

我必须将父组件的输入属性转换为子组件“下拉列表”。
但输出只是一个空字符串！它适用于硬编码字符串，但不适用于翻译的字符串 - 根本没有显示任何内容，甚至没有翻译键。

我已经在我的语言文件中正确设置了翻译，它在其他场景中可以工作，但在这里不行。

使用翻译的空下拉菜单的图像。

带有硬编码标题输入值的下拉菜单图像。

这是我的父组件的 html 形式：

<dropdown
      [title]="'TimePeriod_Last30Days' | translate"
      [items]="[
                'Last 7 days',
                'Last 30 days',
                'Last 90 days',
                'Last 12 months'
                ]"
      (optionSelected)="onTimePeriodSelected($event)"
/>

这是我的下拉组件：

import { Component, Input, ElementRef, Renderer2, Output, EventEmitter } from '@angular/core';

@Component({
  selector: 'dropdown',
  templateUrl: './dropdown.component.html',
  styleUrls: ['./dropdown.component.scss'],
})
export class DropdownComponent {
  @Input() items: string[] = [];
  @Input() title: string;// THIS STRING IS USED FOR DEFAULT DROPDOWN OPTION 
  @Output() optionSelected = new EventEmitter<string>();
  isOpen = false;
  selectedOption: string;
  
  constructor(private eRef: ElementRef, private renderer: Renderer2) {
    this.renderer.listen('window', 'click', (e: Event) => {
      if (!this.eRef.nativeElement.contains(e.target)) {
        this.isOpen = false;
      }
    });
  }
  
  ngOnInit() {
    this.selectedOption = this.title;
  }

  toggleDropdown() {
    this.isOpen = !this.isOpen;
  }

  selectOption(option: string) {
    this.selectedOption = option;
    this.isOpen = false;
    this.optionSelected.emit(this.selectedOption);
  }
}

标题字符串用于默认下拉选项：

<div class="dropdown"> 
  <button class="dropdown-button" (click)="toggleDropdown()" [class.open]="isOpen">
    {{ selectedOption }} <i class="ci-Chevron_Down" id="chevron-down" [class.rotated]="isOpen"></i>
  </button>
  <div class="dropdown-content" *ngIf="isOpen">
    <p *ngFor="let item of items" (click)="selectOption(item)">{{ item }}</p>
  </div>
</div>

  • 我在其他场景中使用下拉菜单，因此无法硬编码默认值

  • 我确信有一种解决方案可以转换父组件 ts 中的值并将其提供给 html，但我不明白为什么管道不起作用，因为我宁愿这样做

  • 我已经三次检查我的翻译文件是否正确设置 - 我的应用程序的所有其他翻译都运行正常

angular