您可以使用Angular 7的ngStyle指令来根据来自JSON列表的值更改文本颜色。下面是一个示例代码:
在组件的.ts文件中,定义一个包含颜色值的JSON列表:
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
template: `
{{item.name}}
`,
styleUrls: ['./app.component.css']
})
export class AppComponent {
items = [
{ name: 'Item 1', color: 'red' },
{ name: 'Item 2', color: 'blue' },
{ name: 'Item 3', color: 'green' }
];
getColor(color: string) {
return color;
}
}
在上面的示例中,我们使用ngStyle指令将颜色绑定到h1元素上。getColor方法接收一个颜色值,并返回该颜色值,以便在模板中使用。
请注意,上述代码中的模板使用了*ngFor指令来循环遍历items列表,并为每个元素创建一个h1标签。在每个h1标签中,我们使用[ngStyle]绑定将颜色值应用到文本上。
在组件的.css文件中,您可以添加一些样式来美化页面:
h1 {
font-size: 24px;
font-weight: bold;
margin-bottom: 10px;
}
以上代码将会根据JSON列表中的颜色值更改文本的颜色。您可以根据需要修改JSON列表和样式。