*ngfor не отображать данные в Angular7
Я использую angular7, и вот мой код: в компоненте.тс
import { Component, OnInit } from "@angular/core";
import { FocusAreasService } from "../../services/focus-areas.service";
@Component({
selector: "app-about",
templateUrl: "./about.component.html",
styleUrls: ["./about.component.scss"]
})
export class AboutComponent implements OnInit {
public canonical: string;
public RsFocusArea: any[];
constructor(public focusareaService: FocusAreasService) {}
ngOnInit() {
this.canonical = document.location.origin;
this.focusareaService.getFocusAreaDataWithHttpClient2().subscribe({
next(response) {
console.info("HttpClient handle data");
console.dir(response);
this.RsFocusArea = response["focusArea"];
//I print this.RsFocusArea here , it has values
console.info("this.RsFocusArea");
console.dir(this.RsFocusArea);
},
error(err) {
console.error("Error: " + err);
},
complete() {
console.info("Completed");
}
});
}
}
}
и в .html
<ul class = "col-xs-12 row">
<li *ngFor = "let area of RsFocusArea" class = "col-xs-12 col-sm-6 col-md-4">{{area}}
</li>
</ul>
и литаж не повторялся и дал мне это в структуре тега:
<ul _ngcontent-aly-c5 = "" class = "col-xs-12 row"><!--bindings = {}--></ul>
<!--bindings = {}-->
<ul _ngcontent-aly-c5 = "" class = "col-xs-12 row"><!--bindings = {}--></ul>
Что-то не так с моим кодом? Я подумал, может быть, мне нужно перерисовать страницу, когда я назначу новое значение RsFocusArea в ngOnInit?
спасибо за поправку, я тоже это заметил. но все еще не работает, когда я меняю его на RsFocusArea = [1, 2, 3];
где .id и .link определены в RsFocusArea
Вам нужно использовать вот так. RsFocusArea = [ {id:'myid, ссылка:'mylink'}, ];
@GaneshGudghe, я удаляю избыточный код, проблема в том, что он не будет повторять тег <li>, даже RsFocusArea представляет собой массив жесткого кода.
хорошо, теперь проверьте, будет ли работать проверьте этот stackblitz.com/edit/angular-aphc1x
Код не имеет никаких проблем, возможно, классы, которые вы используете, могут вызывать некоторые проблемы. попробуйте удалить эти классы, а @GaneshGudghe уже запустил пробный запуск.
Ответы 3
RsFocusArea = [1, 2, 3];
В шаблоне:
<li *ngFor = "let area of RsFocusArea" class = "col-xs-12 col-sm-6 col-md-4">
{{area}}
</li>
https://angular-bchmnn.stackblitz.io
Надеюсь, это решит вашу проблему.
спасибо за ваше решение, я попробовал, работает хорошо. Я обновил свой вопрос. в реальной сцене мы получаем данные с сервера и назначаем их свойству. на данный момент жесткий код работает хорошо. но если я получаю данные с сервера, они снова не работают. Я напечатал данные в next(response) , они не нулевые. так что, может быть, мне следует перерисовать страницу после присвоения данных свойству?
Не могли бы вы опубликовать ответ сервера?
Проблема в подписке
Дело в том, что вы никогда не устанавливаете переменную, которую вы действительно хотите, this.RsFocusArea из вашего компонента никогда не получает значение, переменная this.RsFocusArea, которую вы вызываете в своей подписке, находится в области действия функции next(response){}.
Использование next(response){...} в вашем subscribe() приведет к тому, что ключевое слово this будет ссылаться на функцию next(response){}, что означает, что this.RsFocusArea больше не ссылается на переменную вашего компонента, а вместо этого ищет неопределенную переменную.
(Пояснение здесь: Подписка на Angular2 понимает функцию стрелки)
Вкратце: ключевое слово this может быть сложным внутри других функций.
Починить это:
Вместо этого попробуйте написать свой subscribe с помощью стрелочных функций:
this.focusareaService.getFocusAreaDataWithHttpClient2().subscribe(
response => {
console.info("HttpClient handle data");
console.dir(response);
this.RsFocusArea = response["focusArea"];
//I print this.RsFocusArea here , it has values
console.info("this.RsFocusArea");
console.dir(this.RsFocusArea);
},
err => {
console.error("Error: " + err);
},
() => {
console.info("Completed");
}
});
Если вы действительно хотите использовать нотацию next(), вы можете посмотреть, как связать функцию.
Надеюсь, поможет
О боже!, я писал ответ, который разместил здесь Джоджофулк. По крайней мере, я объясню вам, почему это происходит, в меньшем количестве слов. Стрелочные функции сохраняют контекст, в котором они были объявлены, с другой стороны, объявления функций сохраняют локальную область видимости.
Когда вы делаете это:
{
...
this.RsFocusArea = response["focusArea"];
}
Вы назначаете значение ответа в локальной области функции, а внешняя область не затрагивается, и по этой причине, когда вы печатаете значение, вы видите свой ответ, но вы видите локальный результат, назначенный в локальной области.
RsFocusArea: [1, 2, 3];должно бытьRsFocusArea = [1, 2, 3];