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

Question

I am building my own notification component in my Angular5 application. I have an array of strings.

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

and in view I'm using a loop to iterate through this array:

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

And generally this mechanism works fine. I use the CSS to hide every message after 3 seconds.

But the problem I faced is that, the elements in loop are not deleted from the array. This cause that elements hide and show again and again. I traied to set for ex. item.IsDeleted = true, but this seems to be wrong, because error 'Bindings cannot contain assignments' is still being thrown.

I'm looking for a solutin, to workaround this. Is there any chance to add bindings/assigments in view? Maybe there is other way to achive the same?

EDIT

I don't want to use a database. I created a compoment and a service. In every component which need to use notifications, the service is injected in a contructor, and then new messages are passed via this service to NotificationComponent.

Answer 1

I don't think you can simply add an element to an empty array like this:

myArray[n] = someVariable;

you should use

myArray.push(someVariable); 

and after the array actually has something inside you can use

myArray[n]

in order to access an element... I havn't tested this but I'm pretty sure your syntax would result in assigning a "new Message("blah blah")" to an undefined var so not actually in your array... Feel free to correct me but I'm pretty sure that's your problem there... as someone else said, instead, to remove an element you use:

myArray.splice(i, 1);

splice takes two parameters: index of the object you want to remove and the number of element you want to remove... your array is automatically updated since it's actually an instance of an object you are operating onto.. and that method (splice) returns the array of deleted items... so for example:

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;

UPDATE

Ok i now tested if you can add elements your way: You can... (tho I'm pretty sure using push() is considered cleaner/prettier by pretty much everybody)

But anyway simply inside your component you should add a method

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

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

    }, 3 * 1000);
}

this will automatically set a timer to remove the newly entered element from your array after 3 seconds... no need to hide from css or anything... angular will automatically bind your array to your element with *ngFor

Since you are apparently new to angular i suggest you implement that notification service as.. well.. a service... available throughout all of you app... Read the angular documentation on services (or a tutorial) and just create a NotificationService that you can inject in all your components... my ideal suggestion is a NotificationService such as:

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

this way you will be able to send a notification from any component... for example, let's imagine the following is a component that handles another part of your interface

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