Question

第一次使用Angular并按照教程进行操作时，我似乎不知道自己在尝试根据对象更改类时做错了什么。

以下是html组件

    SELECT
    WEEKOFYEAR('start_time') AS weekno,
    SUM('is_no_show' = 1) AS no_shows,
    SUM('is_cancelled' = 1) AS cancelled
FROM
    myTable
WHERE
    (
        `start_time` > '2019-12-01' AND `start_time` < '2019-12-07'
    ) AND category LIKE 'Continued Probation'
GROUP BY
    weekno

这是组件的ts。

<div [ngClass]="setClasses()">
    <p>
        <input type="checkbox">
        {{todo.title}}
        <button class="del"></button>
    </p>
</div>

这是错误：

import { Component, OnInit, Input } from '@angular/core';
import { Todo } from 'src/app/models/Todo';

@Component({
  selector: 'app-todo-item',
  templateUrl: './todo-item.component.html',
  styleUrls: ['./todo-item.component.css']
})
export class TodoItemComponent implements OnInit {
  @Input() todo: Todo; 

  constructor() {}

  ngOnInit() {}

};

// Set Dynamic Classes

setClasses() {
  let classes = {
    todo: true, 
    'is-complete': this.todo.completed
  }     

  return classes
};

Answer 1

您的setClasses函数不在您的课程之外。应该在里面

import { Component, OnInit, Input } from '@angular/core';
import { Todo } from 'src/app/models/Todo';

@Component({
  selector: 'app-todo-item',
  templateUrl: './todo-item.component.html',
  styleUrls: ['./todo-item.component.css']
})
export class TodoItemComponent implements OnInit {
  @Input() todo: Todo; 


  constructor() { }

  ngOnInit() {
  }

  setClasses() {
    let classes = {
      todo: true, 
      'is-complete': this.todo.completed
    }     

    return classes
  };
};

Answer 2

您需要将setClasses方法移动到组件中，如下所示：



First time using Angular and following a tutorial I can't seem to know what I'm doing wrong when trying to change class depending on object.

Here's the components html

<div [ngClass]="setClasses()">
    <p>
        <input type="checkbox">
        {{todo.title}}
        <button class="del"></button>
    </p>
</div>

Here's the component's ts.

import { Component, OnInit, Input } from '@angular/core';
import { Todo } from 'src/app/models/Todo';

@Component({
  selector: 'app-todo-item',
  templateUrl: './todo-item.component.html',
  styleUrls: ['./todo-item.component.css']
})
export class TodoItemComponent implements OnInit {
  @Input() todo: Todo; 


  constructor() { }

  ngOnInit() {
  }
  // Set Dynamic Classes

  setClasses() {
    let classes = {
      todo: true, 
      'is-complete': this.todo.completed
    }     
    return classes
  };
};

Answer 3

除了您将setClasses函数放在组件类之外的所有内容之外，代码中的所有内容都是正确的

工作演示

https://stackblitz.com/edit/angular-7qnp6w

使用Ngclass指令出现“找不到命名器”错误

3 个答案: