Question

我目前正在开发一个小型网站。在这个网站上，我想要导航栏和带有单元格的表格，根据浏览器所使用的语言显示值。这样可以正常工作，但这是我没有得到的部分。

首次加载页面时，元素值不会显示。

实施例： https://gyazo.com/99b376a86b1667aa4db78587e3f92eed

在这里工作的唯一部分是th。是的，他们也在英文浏览器上正确翻译。重新加载页面后，所有信息都会显示出来。

虽然视图被视为空，但检查元素不是。

所有表格单元格也是如此。所有这些数据都在检查器中，但不在视图中。刷新页面后（不需要硬刷新），它会正确显示所有数据。

在我的代码中，我所做的就是获取navigator.language，将其放入变量并将其放入if语句中。如果荷兰人取荷兰数据，其他英语。除此之外，我只需更改变量的值即可显示正确的翻译。

我的jsfiddle：

https://jsfiddle.net/3zx0temL/

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

@Component({
  moduleId: module.id,
  selector: 'my-app',
  templateUrl: 'pekingMenu.component.html',
  styleUrls: ['pekingMenu.component.css']
})

export class MenuComponent {
  tableNameNoodlesAndRice: string;

  thName: string;
  thDescription: string;
  thPrice: string;

  seafood: string;
  black_ox: string;
  spicy_chicken: string;
  singapore_curry: string;
  crispy_pork: string;
  veggie: string;

  constructor() {}

  ngOnInit() {
    var userLang = navigator.language;
    // console.log(userLang);

    // Add Chinese
    if (userLang == 'nl') {
      this.getDutchInformation();
    } else {
      this.getEnglishInformation();
    }

  }

getEnglishInformation() {
    this.tableNameNoodlesAndRice = 'Noodles & Rice';

    this.thName = 'Name';
    this.thDescription = 'Description';
    this.thPrice = 'Price';

    this.seafood = 'Seafood';
    this.black_ox = 'Black Ox';
    this.spicy_chicken = 'Spicy Chicken';
    this.singapore_curry = 'Singapore Curry';
    this.crispy_pork = 'Crispy Pork';
    this.veggie = 'Vegetarian';
  }

  getDutchInformation() {
    this.tableNameNoodlesAndRice = 'Noodles & Rijst';

    this.thName = 'Naam';
    this.thDescription = 'Beschrijving';
    this.thPrice = 'Prijs';

    this.seafood = 'Zeevruchten';
    this.black_ox = 'Beef Met Zwarte Peper';
    this.spicy_chicken = 'Pittige Kipfilet';
    this.singapore_curry = 'Singapore Kerrie';
    this.crispy_pork = 'Krokante Buikspek';
    this.veggie = 'Vegetarisch';
  }
}

和我的HTML

<table>
  <h3>{{ tableNameNoodlesAndRice }}</h3>

  <tr>
    <th>{{ thName }}</th>
    <th>{{ thDescription }}</th>
    <th>{{ thPrice }}</th>
  </tr>
  <tr>
    <td>{{ seafood }}</td>
    <td></td>
    <td>&euro; 7,95</td>
  </tr>
  <tr>
    <td>{{ black_ox }}</td>
    <td></td>
    <td>&euro; 7,95</td>
  </tr>
  <tr>
    <td>{{ spicy_chicken }}</td>
    <td></td>
    <td>&euro; 7,50</td>
  </tr>
  <tr>
    <td>{{ singapore_curry }}</td>
    <td></td>
    <td>&euro; 7,50</td>
  </tr>
  <tr>
    <td>{{ crispy_pork }}</td>
    <td></td>
    <td>&euro; 7,50</td>
  </tr>
  <tr>
    <td>{{ veggie }}</td>
    <td></td>
    <td>&euro; 7,50</td>
  </tr>
</table>

Angular 2在视图中没有显示元素值，但在inspect元素中显示

0 个答案: