使用 Ngclass 指令"Can't find namer"错误

Question

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

这是组件 html

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

这是组件的 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
};

这是错误：

ERROR in ./src/app/components/todo-item/todo-item.component.ts 27:4
Module parse failed: 'return' outside of function (27:4)
File was processed with these loaders:
* ./node_modules/@ngtools/webpack/src/index.js
You may need an additional loader to handle the result of these loaders.
|         'is-complete': this.todo.completed
|     };
>     return classes;
| }
| ;
ℹ ｢wdm｣: Failed to compile.
ERROR in src/app/components/todo-item/todo-item.component.ts(21,1): error TS2304: Cannot find name 'setClasses'.

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