Question

我正在Angular5应用程序中构建自己的通知组件。我有一个字符串数组。

messages: Message[] = new Array();
this.messages[0]= new Message("Toast 1");
this.messages[1]= new Message("Toast 2");
this.messages[2]= new Message("Toast 3");

并且在视图中我使用循环来遍历此数组：

  <aside  *ngFor="let item of messages">
    <span  class="notification" style="position:absolute">
     {{item.Text}}
    </span>
  </aside>

通常这种机制运行正常。我使用CSS在3秒后隐藏每条消息。

但我遇到的问题是，循环中的元素不会从数组中删除。这导致元素一次又一次地隐藏和显示。我特意为前任做准备。 item.IsDeleted = true，但这似乎是错误的，因为错误＆＃39; Bindings不能包含赋值＆＃39;仍被抛出。

我正在寻找解决方案，以解决这个问题。是否有机会在视图中添加绑定/分配？也许还有其他办法来实现同样的目标吗？

修改

我不想使用数据库。我创建了一个组件和服务。在每个需要使用通知的组件中，服务都在一个构造函数中注入，然后通过此服务将新消息传递给NotificationComponent。

Answer 1

我认为你不能简单地将一个元素添加到空数组中：

myArray[n] = someVariable;

你应该使用

myArray.push(someVariable);

并且在数组实际上有内容之后你可以使用

myArray[n]

为了访问元素... 我没有测试过这个，但是我很确定你的语法会导致为一个未定义的var分配一个“新消息”（“blah blah”），所以实际上不在你的数组中...随意纠正我但是我我很确定那是你的问题...正如别人说的那样，要删除你使用的元素：

myArray.splice(i, 1);

splice接受两个参数：要删除的对象的索引和要删除的元素的数量...您的数组会自动更新，因为它实际上是您正在操作的对象的实例..并且该方法（splice）返回已删除项目的数组...例如：

let myArray: Number[] = [];
//equal to your
//let myArray = new Array();
//but with more common syntax and declaring the type before to avoid post-compile errors

myArray.push(1);
myArray.push(2);
myArray.push(3);
myArray.push(4);
myArray.push(5);
//at this point myArray is [1, 2, 3, 4, 5]

let x = 2;
let result = myArray.splice(x, 1);
let numberAtXPosition = result[0];
//result -> [3]
//numberAtXPosition = 3;

更新

好的，我现在测试了你是否可以按照自己的方式添加元素：你可以...... （我很确定使用push（）几乎每个人都认为更干净/更漂亮）

但是，无论如何，只需在组件内部添加方法

public post(message: String) {
    this.messages.push(message);
    setTimeout(() => {

        this.messages.splice(this.messages.indexOf(message, 1));

    }, 3 * 1000);
}

这会自动设置一个计时器，在3秒后从数组中删除新输入的元素...无需隐藏css或任何东西...... angular会自动将你的数组绑定到你的元素上* ngFor

由于你显然对角度有点新意，我建议你实施那个通知服务......好吧..服务...可以在你们各个应用程序中使用... 阅读有关服务（或教程）的角度文档并且只需创建一个可以注入所有组件的NotificationService ...我的理想建议是NotificationService，例如：

//INSIDE NotificationService class
public subject: Subject<String> = new Subject<String>();
public post(message: String) {
    this.subject.next(message);
}

//INSIDE your NotificationComponent
constructor(private notifications: NotificationService) {}

ngOnInit() {
    this.notifications.subject.subscribe((next) -> {
        this.post(next);
    })
}

public post(message: String) {
    this.messages.push(message);
    setTimeout(() => {

        this.messages.splice(this.messages.indexOf(message, 1));

    }, 3 * 1000);
}

这样您就可以从任何组件发送通知...... 例如，让我们假设以下是处理界面另一部分的组件

//INSIDE ANOTHER COMPONENT
constructor(private notifications: NotificationService) {}

foo() {
    let x: Number;
    ...
    ... some logic
    ...
    ... need to send a notification?
    ...
    this.notifications.post('Ehy my computation results were ' + x);
}

如何从视图中的数组中删除项目

1 个答案: