Question

我有一个按钮，像这样的对象数组，

<button (click)="appendDataToLink()">

test = [
   { name: 'karthik', id: 1, link: '/abc/def/ghi' },
   { name: 'shahbaz', id: 2, link: '/jkl/mno/pqr'}
]

单击按钮时，我想在测试数组的链接中添加随机文本。像link: "/abc/def/ghi/rd-5"

但是发生了什么事link: "/abc/def/ghi/rd-5/rd-7" 如您在此处看到的rd-7附加在其后，而不是link: "/abc/def/ghi/rd-7"

这是每次单击按钮时都会调用appendDataToLink（）方法。

generateRandomNumber() {
   return Math.floor(Math.random() * 10);
}
appendDataToLink() {
  this.test.forEach( e => {
     e.link = `${e.link}/rd-${this.generateRandomNumber()}`
  });
  console.log(this.test);
}

请在我的code上找到闪电战

Answer 1

就像我在评论中链接一样，这是一种简单的方法 https://stackblitz.com/edit/angular-5bq8ez?file=src/app/app.component.ts 您保存了原始链接，并用它来生成将来的链接

编辑：如评论中所述（添加了解决方案说明）

将appendDataToLink函数更改为以下内容：

  appendDataToLink() {
    // immutability - map the old array to a new array instead of mutating old values
    this.test = this.test.map( e => {
      // get the original link property or the current link if it's not set
      var originalLink = e.hasOwnProperty('originalLink') ? e["originalLink"] : e.link;
      // create new object:
      return {
        ...e, // old object destructured
        originalLink: originalLink, // set original link 
        link: `${originalLink}/rd-${this.generateRandomNumber()}` // create a new link based on the original link
      }
    });
    console.log(this.test);
  }

这使用提供的链接作为生成新链接的基础，并且不需要修改原始对象

Answer 2

我知道您正在尝试做什么。每次您单击按钮时，都会将随机数'/rd-(randNum)'附加到现有字符串上。因此，如果您以'/abc/def/ghi'开头并单击按钮，它将添加到字符串中。例如：

*ButtonClick*: '/abc/def/ghi' -> '/abc/def/ghi/rd-3'
*ButtonClick*: '/abc/def/ghi/rd-3' -> '/abc/def/ghi/rd-3/rd-7'
*ButtonClick*: '/abc/def/ghird-3/rd-7' -> '/abc/def/ghi/rd-3/rd-7/rd-5'

等

如果要将链接末尾的数字替换为其他数字，则需要先使用子字符串删除最后一个数字，然后再添加新数字。另外，您可以添加一个新字段，以了解链接是否已被更改，或者这是第一次单击该按钮，这样您就不会丢失'/ ghi'部分：

appendDataToLink() {
  this.test.forEach( e => {
     if (e.linkAltered === true) {
         e.link = e.link.substring(0, e.link.lastIndexOf("/"));
     }
     e.link = ${e.link}/rd-${this.generateRandomNumber()};
     e.linkAltered = true;
  });
  console.log(this.test);
}

希望这会有所帮助！

Answer 3

最简单的解决方案是保持布尔值

firstTime: boolean = true;

然后修改附加函数，如

appendDataToLink() {
  this.test.forEach((e, i) => {
     if (this.firstTime) {
        if ((this.test.length - 1) === i) { this.firstTime = false; }
        e.link = `${e.link}/rd-${this.generateRandomNumber()}`;
     }
     else {
        e.link = e.link.replace(/.$/, this.generateRandomNumber().toString());
     }
  });
  console.log(this.test);
}

Answer 4

从链接而不是链接中获取子字符串

  const link = e.link.substring(0,12);
  e.link = `${link}/rd-${this.generateRandomNumber()}`

Answer 5

检查此代码。

首先检查是否存在任何字符串（'rd-'），如果存在，请替换它，或者如果不存在，则简单地添加它。

this.test.forEach( e => {
      if (/rd-[0-9]/.test(e.link)) {
        e.link = (e.link).replace(/rd-[0-9]/, `rd-${this.generateRandomNumber()}`);
      }
      else {
        e.link = `${e.link}/rd-${this.generateRandomNumber()}`
      }
    });

如果您有任何疑问，请告诉我。

每次单击按钮时更新对象数组中的值

5 个答案: