Angular ngFor与ngClass

Question

我有一个带有天气条件的数组，一个带有图标类名称的风水，其大小与天气条件相同。我想显示带有iconNames [i]的类名的'i'标签。我该怎么办？

<li *ngFor="let item of weather; let i = index">
  <h1>{{ item.valid_date }}</h1>
  <h2>{{ item.temp }}</h2>
  <i [ngClass]="{iconNames[i]}"></i>
</li>

Answer 1

您可以使用class binding：

Path path1 = Paths.get("temp\\nom.txt");
            try {
                Files.write(path1, Arrays.asList(text_arr));
            } catch (IOException e) {
                // TODO Auto-generated catch block
                e.printStackTrace();
            }
             String nom = String.join("\n", Files.readAllLines(Paths.get("temp\\nom.txt")));
                String[] text = nom.split(" ", 2); // this will give abc
                System.out.println(nom.substring(nom.lastIndexOf(" ") + 1));

            String A = text[1].toLowerCase();
            String ACaps = A.toUpperCase().charAt(0) + A.substring(1, A.length());
            return ACaps;

Answer 2

要使用ngClass，可以在组件中创建函数，并在*ngFor内调用它以获取动态值

getClassName(i) {
    return iconNames[i];
}

调用html

<li *ngFor="let item of weather; let i = index">
  <h1>{{ item.valid_date }}</h1>
  <h2>{{ item.temp }}</h2>
  <i [ngClass]="getClasses(i)"></i>
</li>