Функция Math.random + с использованием ngSwitch JS Angular - PullRequest
Новая
       1

Функция Math.random + с использованием ngSwitch JS Angular

0 голосов
/ 09 марта 2020

Я пытаюсь использовать функцию Math.random для генерации числа от 20 до 100 в сочетании с директивой ngSwitch, чтобы я мог отображать буквенную оценку на основе шкалы оценок. Но я не уверен, как мне точно отформатировать код для этого хотя бы на странице HTML (часть ngSwitch).

Пока что в моем файле component.ts у меня есть: 

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

@Component({
selector: 'app-root',
templateUrl: '.app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent implements onInit {
  title = 'title';
  x: number;

  ngOnInit(){
    this.x = Math.floor(Math.random()*10);
  }
}

Вот файл app.component. html file: 

<html lang="en">

<head>
    <meta charset="utf-8">
    <title>Angular</title>
    <base href="/">

    <meta name="viewport" content="width=device-width, initial-scale=1">
</head>

<body>
    <app-root></app-root>
<div style="text-align:center">
   <h1>
      Welcome to {{x}}.
   </h1>
</div>

<div [ngswitch]="switch_expression">
    <p *ngSwitchCase="1">A</p>
    <p *ngSwitchCase="2">B</p>
    <p *ngSwitchCase="3">C</p>
    <p *ngSwitchCase="4">D</p>
    <p *ngSwitchDefault>F</p>
  </div>

</body>
</html>

По какой-либо причине, независимо от того, что я надену на свой код HTML, страница будет отображаться пустой, когда я скомпилируйте код. Любые идеи? Я направился на правильном пути?

1 Ответ

0 голосов
/ 09 марта 2020

Как уже упоминалось @acincognito, этот код никогда не будет работать должным образом!

Здесь много концептуальных ошибок.

Во-первых, вы пытаетесь получить доступ к свойствам компонента вне действительного составная часть. Посмотрите, как вы используете {{x}} вне фактического app-root компонента, так что {{x}}, на который вы ссылаетесь, находится вне области действия компонента.

Интерфейс, который вам нужно реализовать, - OnInit not onInit (заглавная буква имеет значение!).

Тогда есть еще этот [ngswitch]="switch_expression", который не имеет никакого смысла, так как вы никогда не определяли свой [ngswitch]="switch_expression". Кроме того, директива ngSwitch написана неправильно, она должна быть [ngSwitch].

Ваше объявление templateUrl не является допустимым ресурсом, вам нужно изменить его на templateUrl: './app.component.html'

Как и другие посоветуйте, взгляните на angular документы , у них также есть пример стека-блица, с которым вы играете.

Надеюсь, это поможет вам вернуться на правильный путь!

Я создал небольшой блиц стека с решением, которое может работать на вас. Проверьте это здесь!

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...