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

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);
}

请在stackblitz上找到我的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

最简单的解决方案是维护一个布尔值

firstTime: boolean = true;

然后像这样修改append函数

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 3

我明白你想做什么了。每次单击该按钮时，它都会将随机数'/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'

等。

如果要将链接末尾的数字替换为不同的数字，则需要先使用substring删除最后一个数字，然后再添加新数字。此外，您还可以添加一个新字段，以了解链接是否已经更改，或者是否是第一次单击按钮，这样您就不会丢失'/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);
}

希望这能有所帮助！