AngularJS按变量数量生成HTML：幻灯片星级值获取问题

我明白你现在的困扰——遍历幻灯片时每次循环都输出一次星星HTML，导致重复多次输出，而你需要一次性获取所有幻灯片对应的星星结果对吧？下面我来帮你修正代码：

修正后的代码方案 #

方案一：使用for循环收集结果 #

var slides = [ { 'text' : 'The staff was fantastic and very friendly. I would definitely recommend them to anyone. The care has been great!! - ONLINE REVIEWER', 'stars' : 4 }, { 'text' : 'The staff was fantastic and very friendly. I would definitely recommend them to anyone. The care has been great!! - ONLINE REVIEWER', 'stars' : 3 }, { 'text' : 'The staff was fantastic and very friendly. I would definitely recommend them to anyone. The care has been great!! - ONLINE REVIEWER', 'stars' : 2 }, { 'text' : 'The staff was fantastic and very friendly. I would definitely recommend them to anyone. The care has been great!! - ONLINE REVIEWER', 'stars' : 1 }, { 'text' : 'The staff was fantastic and very friendly. I would definitely recommend them to anyone. The care has been great!! - ONLINE REVIEWER', 'stars' : 5 }, { 'text' : 'The staff was fantastic and very friendly. I would definitely recommend them to anyone. The care has been great!! - ONLINE REVIEWER', 'stars' : 2 } ];

$scope.addStars = function(){ 
    // 创建数组存储每个幻灯片的星星HTML
    let allStarsHTML = [];
    // 从索引0开始遍历所有幻灯片（原代码从1开始会漏掉第一个元素）
    for (let i = 0; i < slides.length; i++) { 
        const starsCount = slides[i].stars; 
        const starsHTML = '<a href="#">☆</a>'; 
        const starsFinal = starsHTML.repeat(starsCount); 
        // 将当前幻灯片的星星HTML加入数组
        allStarsHTML.push(starsFinal);
    }
    // 一次性输出所有结果
    console.log(allStarsHTML);
    
    // 如果需要把所有星星HTML拼接成一个连续字符串，可使用join：
    // const combinedStars = allStarsHTML.join('');
    // console.log(combinedStars);
}

方案二：使用map方法更简洁 #

$scope.addStars = function(){ 
    // 用map直接遍历数组生成星星HTML数组
    const allStarsHTML = slides.map(slide => {
        const starsHTML = '<a href="#">☆</a>';
        return starsHTML.repeat(slide.stars);
    });
    // 一次性输出结果
    console.log(allStarsHTML);
    
    // 拼接成字符串的方式：
    // console.log(allStarsHTML.join(''));
}

问题原因分析 #

1. 索引错误：原代码循环从i=1开始，会跳过数组的第一个元素（索引0），导致处理不完整；
2. 重复输出：每次循环都直接console.log，所以会输出多次结果；通过数组收集所有结果后再统一输出，就能实现你需要的“仅获取所有stars值一次”的需求。

内容的提问来源于stack exchange，提问作者Rob Myrick